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“ 别 磨 足 了 ， 快 冲 向 购书 网 站 ， 马 上 订购 这 本 书 吧 ! 不 管 是 浏览 器 端的 JavaScript 程 序 员 ， 还 是 
基于 Node 的 JavaScript 写 手 ， 都 应 该 好 好 读 读 这 本 书 。 它 不 但 为 我 们 揭 开 了 JavaScript 事 件 模型 的 神 
秘 面纱 ， 而 且 具 体 指导 了 如 何 编写 高 效 、 高 可 读 性 的 异步 代码 。 强 烈 推 荐 你 读 一 读 ! ” 

一 一 Reginald Braithwaite，CoffeeScript Ristretto 一 书 作者 


“我 平时 桌面 上 只 留 两 本 JavaScript 方 面 的 参考 书 ， 一 本 是 犀牛 书 ， 一 本 是 Good Parts。 而 这 本 
会 是 第 三 本 。” 
一 一 Lon Ingram，Waterfall 公 司 首席 前 端 开发 者 


“对 JavaScript 的 狂热 促使 Trevor 奉 献 出 了 这 本 开卷 有 益 的 大 作 。 过 去 一 段 时 间 ，JavaScript 的 

使 用 情景 和 复杂 度 与 日 俱 增 ， 服 务 器 端 运行 时 环境 有 增 无 减 ， 客 户 端 应 用 也 在 不 断 增长 。 此 时 ， 要 

使 代码 库 更 具 可 维护 性 、 更 优雅 ， 异 步 模式 就 成 为 一 种 基本 的 选择 。 本 书 献上 了 关于 异步 编程 模式 
的 大 量 宝贵 技巧 、 技 术 和 指示 ， 让 我 们 几乎 不 费 吹 灰 之 力 就 能 得 偿 凤 愿 。 干 得 漂亮 ，Trevor!l ” 

一 一 Christophe Porteneuve，Delicious Insights 公 司 CTO 


JavaScript 是 个 单线 程 的 编程 语言 ， 你 如 何 应 对 多 媒体 、 多 任务 、 多 核 的 世界 ? 经验 丰富 的 
JavaScript 程 序 员 也 难免 被 网 络 中 错综复杂 的 回调 弄 得 灰 头 土 有 签 。 那 么 ， 你 绝对 应 该 看 看 这 
本 《JavaScript 异 步 编 程 》。 

本 书 从 最 基本 也 是 最 重要 的 JavaScript 事 件 模型 开始 ， 生 动 地 复 盘 了 各 种 异步 应 用 情景 ， 逐 一 呈 
现 了 目前 在 用 的 各 种 异步 设计 模式 和 异步 编程 类 库 ， 从 PubSub 到 Promise 对 象 ， 从 异步 工作 流 控制 类 
库 到 worker 多 线程 技术 ， 直 到 浏览 器 端 脚 本 的 异步 加 载 技术 。 本 书 叙 述 流畅 ， 从 问题 引入 ， 到 初步 解 
决 ， 再 到 用 例 延 伸 、 进 阶 方案 ， 一 路 抽 丝 剥 东 ， 层 层 推进 ， 精 彩 纷呈 。 一 册 在 手 ， 定 能 让 你 自信 地 
应 对 大 型 Web 应 用 程序 的 复杂 性 ， 交 付 快 速 响应 的 JavaScript 代 码 ! 
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内 容 提要 


本 书 讲述 基本 的 异步 处 理 技 巧 ， 包 括 PubSub、 事 件 模式 、Promises 等 ， 通 过 这 
些 技巧 ， 可 以 更 好 地 应 对 大 型 Web 应 用 程序 的 复杂 性 ， 交 付 快 速 响应 的 代码 。 理 解 
了 Javascript 的 异步 模式 可 以 让 读者 写 出 结构 更 合理 、 性 能 更 出 色 、 维 护 更 方便 的 
Javascript 程序 。 

本 书 适 合 JavaScript 开发 人 员 阅 读 。 
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本 书 赞 誉 





本 书 谈论 了 目前 JavaScript 开发 中 最 关键 的 主题 之 一 : 如 何 搞 定 并 发 
性 和 并 发 任务 ， 而 不 是 被 它们 搞 得 抓 狂 ! 这 可 是 目前 我 见 过 的 第 一 
本 专注 于 该 主题 的 著作 。 为 了 不 被 并 发 任务 搞 得 抓 注 ， 好 好 看 看 这 
本 书 吧 。 














Peter Cooper，JavaScript Weekly 编辑 


Trevor 简明 扼要 地 六 释 了 如 何 编 写 异步 的 JavaScript， 并 且 不 偏 不 倚 

地 展示 了 浏览 器 端 示例 和 服务 器 端 示例 。 本 书 既 是 指南 又 是 综述 , 十 

分 引人入胜 ,任何 打算 打 怪 升级 的 JavaScript 开发 者 都 必须 读 一 读 。 
一 一 Wynn Netherland，Changelog 联合 创办 人 























本 书 是 JavaScript 异步 王国 的 终极 指南 。 任 何人 只 要 想 构 建成 熟 的 、 
良 构 的 、 高 效 的 JavaScript 应 用 ， 就 必然 要 了 解 本 书 谈 及 的 概念 和 
工具 。 


一 一 Julien Biezemans，Ruby/JavaScript 开发 人 员 ， 
Cucumber.js 创建 者 


致谢 





我 对 JavaScript 算 不 上 一 见 钟 情 ， 可 如 今 她 却 是 我 最 爱 的 两 种 编程 语 
言 之 一 。 另 外 一 种 ? 当然 是 JavaScript 的 小 妹 一 一 CoffeeScript 啦 。 我 
是 如 何 放下 志 下 之 心 ， 全 心 全 意 爱 上 JavaScript 的 呢 ? 这 个 故事 和 成 
千 上 万 名 程序 员 的 爱情 故事 没什么 两 样 。 我 要 感谢 那些 一 开始 就 严肃 
对 待 JavaScript 的 人 ， 正 因为 他 们 ， 才 使 得 这 门 语言 享有 今天 这 样 丰 
富 的 开发 生态 系统 。 感 谢 John Resig 创建 了 浏览 器 端 事实 上 的 标准 库 
jQuery， 感 谢 Jeremy Ashkenas 造就 了 CoffeeScript 和 丰富 但 仍 极 尽 简 
洁 的 Backbone.js 框架 ， 感 谢 Ryan Dahl 赋予 JavaScript 一 个 健壮 的 服 
务 器 环境 ， 还 要 感谢 其 他 所 有 程序 员 通 过 自己 的 工作 证 明了 


JavaScript 是 一 流 的 语言 。 


























当然 ， 如 果 只 知道 和 JavaScript 谈 情 说 爱 ， 我 并 不 能 写成 这 本 书 。 我 
要 感谢 Pragmatic Bookshelf 团队 帮 我 彻底 改造 了 那 份 匆匆 写 就 的 手 
稿 , 使 它 达到 了 PragProg 闻名 遐 偿 的 优质 标准 。 特别 要 感谢 Susannah 
Pfalzer 总 编 以 及 Dave Thomas 和 Andy Hunt 这 两 位 负责 人 , 最 最 要 感 
谢 的 是 我 的 编辑 Jackie Carter。 你 们 的 理解 和 激励 是 我 宝贵 的 财富 。 




















此 外 还 要 感谢 本 书 的 技术 审阅 人 : Julien Biezemans 、Christophe 
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Porteneuve 、Michael Ficarra 、Travis Swicegood 和 Lon Ingram。 特别 
要 感谢 Karl Stolley, 除了 多 次 审阅 手稿 , 还 给 予 我 很 多 其 他 方面 的 帮 
助 。 还 要 感谢 Stan Angeloff 和 Roly Fentanes 审阅 了 最 初 的 手稿 。 书 中 
遗留 的 任何 错误 都 由 我 自己 承担 责任 。 











最 后 ,感谢 我 供职 的 公司 HubSpot 一 直 支 持 我 写 完 这 本 书 。 作 为 一 位 
自由 撰 稿 人 ， 在 多 年 流浪 漂泊 之 后 ， 我 终于 找到 了 归宿。 





Trevor Burnham ( trevorburnham@gmail.com ) 
2012 年 11 月 





JavaScript 最 初 设 计时 是 为 了 强化 Netscape 2.0 浏览 器 的 网 页 表现 力 ， 
现在 却 成 为 了 多 媒体 、 多 任务 .多 内 核 网 络 世界 中 的 一 种 单线 程 语 言 。 
不 过 从 1995 年 算 起 ，JavaScript 也 不 算是 挣扎 求 存 ， 倒 可 以 算 作 页 壮 
成 长 。 浏 览 器 舞台 上 走马 灯 似 地 涌现 出 一 个 个 潜在 对 手 ,， 你 方 唱 婴 我 
登场 ， 随 便 举 几 个 例子 一 Flash、Silverlight、Java 小 应 用 ， 等 等 。 











与 此 同时 ， 出 现 了 一 个 叫做 Ryan Dahl 的 程序 员 。 他 想 为 事件 驱动 型 
的 服务 器 建立 一 个 新 的 框架 , 于 是 深入 钻研 计算 机 科学 , 藻 藻 寻找 一 
种 动态 的 、 单 线程 的 语言 ,最 终 却 发 现 答案 就 在 眼前 。 于 是 ，Node.js 
就 此 诞生 ，JavaScript 成 为 了 服务 器 世界 可 以 倚重 的 力量 之 一 。 














怎么 会 这 样 呢 ? 2001 年 ，Paul Graham 在 其 文章 “The Other Road 
Ahead”" 中 写 下 了 这 样 的 话 : 





Q@ 此 文章 修订 后 的 版 本 可 见于 http://paulgraham.com/road.html。 最 初 的 脚注 可 见于 
Hackers & Painters 一 书 ， 该 书 中 文 版 《黑客 和 画家 》 已 由 人 民 邮 电 出 版 社 出 版 。 
一 一 译 者 广 
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如 果 我 是 你 ， 我 其 至 都 不 会 碰 JavaScript…… 我 在 网 上 看 到 的 大 
多 数 JavaScript 都 没有 必要 存在 ， 而 且 其 中 很 多 代码 都 跑 不 通 。 


如 今 ，Graham 是 Y Combinator 的 首席 合伙 人 ， 这 家 投资 集团 背后 有 
Dropbox 、Heroku 以 及 数 以 百 计 正 在 运作 的 项 目 ， 几 乎 所 有 这 些 项 目 
都 使 用 了 JavaScript。 正 如 Graham 在 修订 后 的 文章 中 言 道 ,“JavaScript 
现在 能 用 了 ”。 


JavaScript 什么 时 候 变 成 了 一 种 体面 的 语言 ?》 有 人 说 ， 转 折 点 是 2004 
年 Gmail 的 问世 。Gmail 向 全 世界 证 明了 重量 级 的 Ajax 允许 你 在 浏览 
器 端 运行 一 流 的 电子 邮件 客户 端 。 还 有 人 说 , 转折 点 是 2006 年 jQuery 
的 问世 。 jQuery 抽象 出 当时 浏览 器 对 手 的 API, 建立 了 事实 上 的 标准 。 
(截至 2011 年 ， 最 大 的 1.7 万 个 网 站 中 有 48% 使 用 了 jQuery。” ) 


管 是 什么 原因 ，JavaScript 就 坚守 在 这 里 。Apple 追随 着 JavaScript 
了 WebKit 和 Safari，Microsoft 追随 着 JavaScript 带 来 了 Metro。 
甚至 Adobe 也 氛 JavaScript 的 场 ,其 推出 的 一 些 工 具 开 始 生 成 HTML5 
而 不 是 Flash。JavaScript 一 开始 只 是 一 种 微不足道 的 浏览 器 特性 ， 现 
在 却 理 所 当然 地 成 为 了 世界 上 最 重要 的 编程 语言 。 














感谢 网 络 浏览 器 的 无 所 不 在 ，JavaScript 比 以 往 任何 语言 都 更 接近 于 
兑现 Java 那 句 古 老 的 承诺 :“ 一 次 编写 ， 到 处 运行 。 2007 年 ，Jeff 
Atwood 炮制 出 所 谓 的 Atwood 法则 : 








任何 可 以 用 JavaScript 写成 的 应 用 最 终 都 会 用 JavaScript 写 。2 





见 http://appendto.conm/jquery-overtakes-flash。 





见 http://www.codinghorror.comy/blog/2007/07/the-principle-of-least-powerhtml。 
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天 堂 里 也 有 麻烦 事 儿 


一 般 认 为 JavaScript 是 可 以 利用 事件 模型 处 理 异步 触发 任务 的 单线 程 
语言 。 如果 只 有 两 三 个 可 能 的 事件 , 单线 程 语言 编写 的 面向 事件 的 代 
码 要 比 多 线程 代码 简单 得 多 。 这 从 概念 上 无 懈 可 击 , 而 且 它 不 再 需要 
用 互 斥 量 或 信号 量 来 封装 数据 以 保证 数据 的 线程 安全 性 。 但 是 ,如 果 
涌现 出 很 多 事件 , 同时 要 求 数据 的 状态 能 够 从 一 个 事件 传递 到 下 一 个 
事件 , 那么 这 种 简单 性 常常 要 让 位 于 令 人 望而却步 的 代码 结构 一 一 人 金 
字 塔 厄运 再 次 重 现 。 
































stepl(function(result1) { 
step2(function(result2) { 
step3(function(result3) { 
// and so on,.. 
}); 
}); 
所 


“我 喜欢 异步 编程 ， 但 我 没 法 编 出 这 样 的 代码 。 ”这 是 Nodejs 谷歌 小 
组 中 一 位 开发 人 员 吐 的 苦水 。" 但 问题 并 不 在 于 语言 ， 而 在 于 程序 员 
使 用 语言 的 方式 。 如 何 优雅 地 应 对 复杂 的 事件 集 ， 这 仍然 属于 
JavaScript 有 待 解决 的 前 沿 领 域 。 








那么 ,让 我 们 继续 向 前 冲 吧 ! 让 我 们 证 明 给 全 世界 看 ,即使 是 最 复杂 
的 问题 也 可 以 用 整洁 的 、 可 维护 的 JavaScript 代码 来 解决 ! 





@ 参见 https://groups.google.com/forum/#!topic/nodejs/wzSUdkPICWeg。 
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本 书 读者 


本 书 是 写 给 中 级 JavaScript 写 手 的 。 你 应 该 了 解 变 量 的 作用 域 是 怎么 
回 事 ,诸如 typeof 、arguments 、this 之 类 的 关键 字 也 不 会 让 你 如 
坠 云雾 。 重 点 中 的 重点 也 许 是 你 要 知道 





func(function(arg) { return next(arg); }); 
只 是 一 种 鹃 里 咖 叶 、 毫 无 必要 的 写法 ， 多 数 情况 下 它 可 以 简写 成 ; 
func(next); 


( 请 参阅 Reg Braithwaite 的 文章 “Captain Obvious on JavaScript”"， 
了 解 更 多 有 关 JavaScript 用 法 的 重要 的 小 例子 。) 


目前 你 无 需 知道 JavaScript 如 何 调度 异步 事件 ,我们 留待 第 1 章 再 学 习 。 
JavaScript 的 学 习 资 源 


随 着 JavaScript 成 为 网 络 上 的 通用 语 ( 尚 不 论 那些 移动 设备 ), 涌现 出 
了 海量 的 参考 书 、 课 程 和 网 站 。 下 面 是 我 推荐 的 一 些 学 习 资 源 。 




















口 如 果 你 刚刚 接触 编程 ， 请 看 看 交互 式 的 教程 网 站 Codecademy ”。 

口 如 果 你 此 前 擎 握 了 另 一 门 编程 语言 ， 现 在 想 将 JavaScript 作为 浏 
览 器 的 脚本 语言 ， 则 请 看 看 CodeSchool 提供 的 交互 式 jQuery 空 
中 课堂”。 


























人 参见 https://github.com/raganwald/homoiconic/blob/master/2012/01/captain-obvious-onjava 
Scriptmd。 

@ 参见 http:/www.codecademy.com/。 

@ 参见 http:/www.codeschool.com/。 
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口 如 果 你 想 要 更 正式 一 点 的 JavaScript 语言 介绍 ， 请 揣摩 Marijn 
Haverbeke 的 Eloguent JavaScript "一 书 。 

口 如 果 你 只 是 JavaScript 的 初学 者 ， 想 按部就班 提高 ， 避 免 掉 入 销 见 
的 陷阱 ， 请 花 点 时 间 看 看 JavaScript Garden”。 





如 何 求助 








“这 里 应 该 用 typeof 还 是 instanceof 呢 ? ”对 这 样 的 问题 举 棋 不 定 
时 ,请 绕 开 过 气 的 W3Schools 网 站 ( 遗憾 的 是 , 谷歌 搜索 用 户 很 容易 
喜欢 上 它 )， 直 接 访 问 MDN ( Mozilla Developer Network，Mozilla 开 
发 人 员 网 络 ) 网 站 。” 


Mozilla 基金 会 (你 可 能 听 过 该 基金 会 推出 的 Firefox 浏览 器 ) 由 
JavaScript 之 父 Brendan Eich 主持 。 该 基金 会 知道 自己 要 干什么 。 














如 果 你 在 MDN 的 网 页 上 找 不 到 答案 ,可 以 带 着 问题 去 Stack Overflow 
网 站 ”。 这 个 网 站 有 一 个 特别 有 用 的 开发 者 社区 ， 而 且 我 敢 打赌 ， 任 
何 打上 JavaScript 标签 的 纠结 问题 都 会 很 快 有 人 回应 。 





运行 代码 示例 





本 书 稍 特别 的 地 方 在 于 ， 我 会 同时 讨论 客户 端 (浏览 需 ) 代码 和 服务 
器 端 (Nodejs ) 代码 。 这 也 体现 了 JavaScript 独 特 的 可 移植 性 。 那 些 核 





参见 http://eloquentjavascript.net/。 
参见 http://javascriptgarden.info/。 
参见 https://developer.mozilla.org/。 
参见 http://stackoverflow.com/。 


电 四 提 日 
NAN 
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心 概念 适用 于 所 有 的 JavaScript 环境 ， 但 某 些 示例 只 针对 某 一 种 
JavaScript 环境 。 


即使 你 对 编写 Node 应 用 毫 无 兴趣 ， 也 希望 你 在 本 地 运行 一 遍 这 些 代 
码 片 段 。 具 体 说 明 请 参见 “在 Nodejs 中 运行 代码 ”。 


可 以 运行 哪些 代码 示例 


如 果 看 到 的 代码 片段 带 有 文件 名 , 意味 着 这 是 一 段 独立 的 代码 ,无 需 
更 改 即 可 运行 。 这 里 有 一 个 例子 : 





Preface/stringConstructor.js 


console.log('str' .constructor.name ) ; 


上 下 文 环境 会 表明 该 代码 可 运行 于 浏览 器 端 、Nodejs 端 ， 还 是 两 者 
均 可 。 





如 果 代 码 片 段 未 带 有 文件 名 , 则 意味 着 这 不 是 独立 的 代码 , 可 能 是 大 
型 代码 例子 的 组 成 部 分 ， 或 者 是 一 段 假想 代码 。 例 子 如 下 。 





Var tenSeconds = 10 * le3; 
setTimeout(launchSatellite, tenSeconds); 


这 些 代 码 示例 是 用 来 阅读 而 不 是 用 来 运行 的 。 


在 Node.js 中 运行 代码 


Node 的 安装 和 使 用 都 非常 简单 : 只 要 访问 http:/nodejs.org/， 单 击 
Download (下载 )， 并 运行 Windows 或 OS X 的 安装 程序 (或 者 根据 
*nix 源 进行 编译 )。 接 下 来 ， 就 可 以 从 命令 行 运行 node 以 开启 一 个 
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JavaScript REPL 会 话 ( 类 似 于 Ruby 的 irb 环境 )。 


$ node 

> Math.pow(5, 6) 

15625 

将 JavaScript 文件 名 作为 参数 传 给 node 命 令 , 即 可 运行 这 个 JavaScript 
文件 。 

$ echo "console.log(typeof NaN)" > foo.js 


$ node foo.js 
number 


在 浏览 器 中 运行 代码 
目前 的 各 个 浏览 器 都 提供 了 一 个 很 小 很 好 的 REPL 工具 , 支持 在 当前 


页 面 环境 下 运行 JavaScript 代码 。 不 过 要 想 玩 转 多 行 代码 示例 ， 最 好 
还 是 脱 机 使 用 类 似 于 jsFiddle 这样 的 网 络 沙 箱 。 


使 用 jsFiddle, 可 以 输入 JavaScript、HTML 及 CSS , 然后 单 击 Run( 运 
行 ) 即 可 看 到 结果 (或 按 Ctrl+Enter )。( 控制 台 输 出 将 传递 给 开发 人 
员 的 控制 台 。) 也 可 以 启用 jQuery 这 样 的 框架 ， 为 此 在 左边 栏 选中 它 
即 可 。 还 可 以 保存 自己 的 活动 ， 这 会 得 到 一 个 可 分 享 的 URL。 











本 书 的 代码 样式 


JavaScript 没有 官方 的 样式 指南 ， 但 在 项 目 中 维持 一 致 的 编码 样式 又 
很 重要 。 为 此 ， 本 书 采 纳 了 以 下 非常 常见 的 约定 : 


口 缩 进 为 两 个 空格 ; 





@ 参见 http://jsfiddle.net/。 
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口 标识 符 遵循 驼峰 式 大 小 写 命名 惯例 ; 
口 每 个 表达 式 的 末尾 使 用 分 号 ， 但 函数 定义 除外 。 





根据 Reg Braithwaite 的 提议 ,我 对 函数 调用 链 采 用 了 特殊 的 缩 进 规 
则 。 这 条 缩 进 规则 稍 显 复杂 ,基本 而 言 是 : 当 且 仅 当 调用 链 中 的 两 个 
函数 调用 返回 同一 个 对 象 时 , 才 会 使 用 相同 的 缩 进 。 因 此 ,我 会 写 出 
这 样 的 示例 : 





$('#container > ul li.inactive') 
.SlideUp(); 


jQuery 的 sLideup 方法 返回 的 对 象 就 是 调用 自己 的 对 象 。 于 是 , 该 函 
数 调用 不 再 缩 进 。 与 之 相反 : 


var $paragraphCtone = $('p:last') 
.Clone(); 


这 里 的 clone 方法 继续 缩 进 ， 因 为 它 返回 了 一 个 不 同 的 对 象 。 


这 种 约定 的 好 处 在 于 , 它 明 确 了 调用 链 中 各 个 函数 的 返回 值 。 下 面 给 
出 一 个 更 复杂 的 示例 。 
$('h1') 

.first() 

.addClass('first') 
.end() 

.last() 

.addClass('last'); 
jQuery 的 first 方法 及 Last 方法 分 别 得 选 一 个 数据 集 而 剩 下 其 第 一 
个 及 最 后 一 个 元 素 ， 而 end 方法 撤消 了 Last 筛选 方法 。 于 是 ，end 
不 再 缩 进 ， 因 为 它 返 回 的 值 等 同 于 $('h1' ) 的 值 。( Last 的 缩 进 水 平 
可 以 等 同 于 first， 因 为 这 时 已 重 置 了 调用 链 。) 
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[1, 2, 3, 4, 5] 
.filter(function(int) { return int % 2 === 1; }) 
.forEach(function(odd) { console.log(odd); }) 


关于 altJS 的 只 言 片 语 


有 很 多 语言 能 编译 成 JavaScript ， 这 可 以 简化 代码 的 编写 。( 在 
http://altjs.org 网 站 上 能 找到 一 个 相当 全 面 的 语言 清单 。) 本 书 不 谈 这 
些 。 本 书 谈论 的 是 ， 即 便 不 使 用 预 编译 器 ， 也 能 编写 出 最 棒 的 
JavaScript 代码 。 我 对 altJS 没有 任何 成 见 ( 请 参阅 下 一 节 )， 但 我 相 
信 重 点 始终 是 如 何 理解 底层 的 语言 。 

















某 些 altJs 语言 专门 致力 于 “驯化 ”异步 调用 ， 即 可 以 用 更 偏向 于 同 
步 的 编码 风格 来 编写 异步 调用 。 附 录 1 会 介绍 这 些 语言 的 基本 情况 。 











CoffeeScript 





我 喜爱 CoffeeScript， 这 不 是 什么 秘密 。CoffeeScript 是 一 种 编译 至 
JavaScript 的 优美 表述 性 语言 。 我 在 HubSpot 的 日 常 工 作 中 大 量 使 用 
这 种 语言 。 在 一 些 诸如 Railsconf、Credev 之 类 的 讨论 会 上 ， 我 也 谈 
到 了 CoffeScript。 我 的 第 一 本 书 ，CoffeeScript: Accelerated JavaScript 
Develop- ment， 就 是 以 CoffeeScript 为 主题 的 。? 








@ 参见 http://pragprog.com/book/tbcoffee/coffeescript。 中 文 版 《深入 浅 出 CoffeeScript》 
已 由 人 民 邮 电 出 版 社 出 版 。 译 者 注 
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不 过 在 开始 撰写 本 书 时 我 决定 ， 用 CoffeeScript 来 写 只 会 得 不 偿 失 ， 
徒然 糟 践 了 CoffeeScript 的 魅力 。 总 的 来 说 ，CoffeeScript 写 手 对 
JavaScript 的 理解 非常 深刻 ， 而 诸如 square = (x) => x * x 之 类 的 
代码 对 于 JavaScript 纯化 论 者 来 说 不 瘟 于 远古 象形 文字 。?” 


所 以 ， 如 果 你 是 一 位 CoffeeScript 程序 员 ， 我 要 为 那些 花 括 号 向 你 
致 火 。 至 于 其 他 人 ， 请 相信 我 ， 你 从 本 书 中 学 到 的 经 验 可 以 通行 于 
任何 altJS 语言 。 


本 书 的 相关 资源 


通过 The Pragmatic Bookshelf 网 站 上 的 本 书页 面 (http://pragprog.com/ 
book/tbajs/async-javascript )， 你 可 以 下 载 本 书 中 用 到 的 示例 代码 ， 也 
可 以 获取 最 新 的 信息 , 还 可 以 在 一 个 热情 友好 的 论坛 里 询问 一 些 与 本 
书 有 关 的 问题 。 


对 于 更 常见 的 JavaScript 相关 问题 , 我 (再 次 ) 衷心 推荐 Stack Overflow 
网 站 ”。 我 跟 该 网 站 不 存在 什么 瓜 田 李 下 之 嫌 , 但 我 确实 是 它 的 热心 拥 
在 ， 我 在 该 网 站 的 声望 值 已 经 骄傲 地 冲 上 23 000 分 大 关 ( 而且 还 继续 
累积 着 )。 在 这 里 , 条 清 缕 细 、 格 式 正规 的 问题 几乎 总 能 得 到 及 时 回应 。 


最 后 ， 如 果 你 希望 直接 联系 到 我 ， 可 发 邮件 至 trevorburnham@ 
gmail.com, 或 关注 我 的 推 特 账 号 : @trevorburnham 。 我 一 直 茶 候 着 读 
者 们 的 反馈 。 


闲 言 少 象 。 让 我 们 异步 起 来 吧 ! 


























Q@ 好 吧 ， 也 许 不 会 一 直 这 样 ， 参 见 http://wiki.ecmascript.org/doku.php?id=harmony: 
arrow_function syntax。 
@ 参见 http://stackoverflow.com/。 
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深入 理解 JavaScript 事件 





事件 ! 事件 到 底 是 怎么 工作 的 ?JavaScript 出 现 了 多 久 ， 对 JavaScript 
异步 事件 模型 就 迷 届 了 多 久 。 迷 届 导 致 bug，bug 导致 慎 怒 ， 然 后 尤 
达 大 师 就 会 教 我 们 如 何如 何 …… 





不 过 本 质 上 ， 从 概念 上 看 ，JavaScript 事件 模型 既 优 雅 义 实用 。 一 日 

大 家 接受 了 这 种 语言 的 单线 程 设计 ， 就 会 觉得 JavaScript 事件 模型 更 

像 是 一 种 功能 , 而 不 是 一 种 局 限 。 它 意味 着 我 们 的 代码 是 不 可 中 断 的 ， 
意味 着 调度 的 事件 会 整整 齐 齐 排 好 队 ， 有 条 不 类 地 运行 。 











本 章 将 介绍 JavaScript 的 异步 机 制 ， 并 破除 一 些 常 见 的 误解 。 我 们 会 看 
到 setTimeout 真正 做 了 些 什么 。 接 着 会 讨论 回调 中 抛 出 错误 的 处 理 。 
最 后 会 商定 本 书 的 主旨 : 为 了 清晰 和 可 维护 性 ， 努 力 组 织 异 步 代码 。 

















1.1 事件 的 调度 


如 果 想 让 JavaScript 中 的 某 段 代码 将 来 再 运行 ,可 以 将 它 放 在 回调 中 。 
回调 就 是 一 种 普通 函数 ， 只 不 过 它 是 传 给 像 setTimeout 这 样 的 函 
数 ， 或 者 绑 定 为 像 document .onready 这 样 的 属性 。 运 行 回 调 时 ， 
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我 们 称 已 触发 某 事 件 〈 譬如 延 时 结束 或 页 面 加 载 完毕 )。 


当然 ,可怕 的 总 是 那些 细节 ,哪怕 是 像 setTimeout 这 样 看 起 来 很 简 
单 的 东西 。 对 setTimeout 的 描述 通常 像 这 样 : 


给 定 一 个 回调 及 n 毫秒 的 延 信 ，setTimeout 就 会 在 nn 之 秒 后 运 
了 于 该 回调 。 


但 是 , 正如 我 们 将 在 这 一 节 力 至 这 一 章 里 看 到 的 , 以 上 描述 存在 严重 
缺陷 。 大 多 数 情 况 下 ,该 描述 只 能 算 接近 正确 ,而 在 其 他 情况 下 则 完 
全 是 谬误 。 要 想 真 正 理解 setTimeout， 必 须 先 大 体 理 解 JavaScript 
事件 模型 。 





1.1.1 现在 还 是 将 来 运行 


在 探究 setTimeout 之 前 , 先 来 看 一 个 简单 的 例子 。 该 情形 党 第 会 
惑 JavaScript 新 手 ， 特 别 是 那些 刚刚 从 Java 和 Ruby 等 多 线程 语言 
移 过 来 的 新 手 。 


迷 
迁 








EventModel/loopWithTimeout.js 
for (var i = 1; i <= 3; i++) { 

setTimeout (function(){ console.log(i); }, 0); 
}; 


《4 
4 
4 


大 多 数 刚 接触 JavaScript 语言 的 人 都 会 认为 以 上 循环 会 输出 1,2, 3， 
或 者 重复 输出 这 3 个 数字 , 因为 这 里 的 3 次 延 时 都 抢 着 要 第 一 个 触发 
(每 次 暂停 都 调度 为 0 毫秒 后 到 时 )。 
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要 理解 为 什么 输出 是 4，4，4， 和 需要 知道 以 下 3 件 事 。 





口 这 里 只 有 一 个 名 为 i 的 变量 , 其 作用 域 由 声明 语句 var 定义 (该 
声明 语句 在 不 经 意 间 让 i 的 作用 域 不 是 循环 内 部 ,而 是 扩散 至 蕴含 
循环 的 那个 最 内 侧 函 数 )。 

口 循环 结束 后 ，i===4 一 直 递 增 ， 直 到 不 再 满足 条 件 i<=3 为 止 。 

口 JavaScript 事件 处 理 需 在 线程 空闲 之 前 不 会 运行 。 











前 两 条 还 属于 JavaScript 101 的 范畴 ， 但 第 三 个 更 像 是 一 个 “惊喜 ”。 
一 开始 使 用 JavaScript 的 时 候 ， 我 也 不 太 相信 会 这 样 。Java 令 我 担心 
自己 的 代码 随时 会 被 中 断 。 上 百 万 种 潜在 的 边界 情况 让 我 焦虑 万 分 ， 
我 一 直 在 想 :“ 要 是 在 这 两 行 代码 之 间 发 生 了 什么 稀奇 古怪 的 事 ， 会 
怎么 样 呢 ? ” 





然后 ,终于 有 一 天 ,我 再 也 没有 这 样 的 担心 了 …… 


1.1.2 ”线程 的 阻塞 
下 面 这 段 代 码 打破 了 我 对 JavaScript 事件 的 成 见 。 


EventModel/loopBlockingTimeout.js 
var start = new Date; 
setTimeout (function(){ 
var end = new Date,; 
console.log('Time elapsed:', end - start, 'ms'); 
}, 500); 
while (new Date - start < 1000) {}; 


按照 多 线程 的 思维 定 势 ,我 会 预计 500 毫秒 后 计时 函数 就 会 运行 。 不 
过 这 要 求 中 断 欲 持续 整整 一 秒 钟 的 循环 。 如果 运行 代码 , 会 得 到 类 似 
这 样 的 结果 : 


站 


几 
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《Time elapsed: 1002ms 
大 家 得 到 的 数字 可 能 会 稍 有 不 同 ， 这 是 因为 setTimeout 和 setIn- 
terval 一 样 ,其 计时 精度 要 比 我 们 的 期 望 值 差 很 多 ( 请 参阅 1.2.2 市 )。 
不 过 ， 这 个 数字 肯定 至 少 是 1000， 因 为 setTimeout 回调 在 while 
循环 结束 运行 之 前 不 可 能 被 触发 。 
那么 ， 如 果 setTimeout 没有 使 用 另 一 个 线程 ， 那 它 到 底 在 做 什么 
呢 ? 





1.1.3 ”队列 


调用 setTimeout 的 时 候 ， 会 有 一 个 延 时 事件 排 入 队列 。 然 后 
setTimeout 调用 之 后 的 那 行 代码 运行 ， 接 着 是 再 下 一 行 代码 ， 直 到 
再 也 没有 任何 代码 。 这 时 JavaScript 虚拟 机 才 会 问 :“ 队 列 里 都 有 谁 
啊 ? ” 


如 果 队 列 中 至 少 有 一 个 事件 适合 于 “触发 ” 就 像 1000 毫秒 之 前 设 定 
好 的 那个 为 期 500 毫秒 的 延 时 事件 )， 则 虚拟 机 会 挑选 一 个 事件 ， 并 
调用 此 事件 的 处 理 器 (譬如 传 给 setTimeout 的 那个 函数 )。 事 件 处 
理 器 返回 后 ， 我 们 又 回 到 队列 处 。 


输入 事件 的 工作 方式 完全 一 样 : 用 户 单 击 一 个 已 附加 有 单 击 事件 处 
理 器 的 DOM ( Document Object Model， 文 档 对 象 模型 ) 元 素 时 ， 
会 有 一 个 单 击 事件 排 入 队列 。 但 是, 该 单 击 事件 处 理 器 要 等 到 当前 
所 有 正在 运行 的 代码 均 已 结束 后 ( 可 能 还 要 等 其 他 此 前 已 排队 的 事 
件 也 依次 结束 ) 才 会 执行 。 因 此 ， 使 用 JavaScript 的 那些 网 页 一 不 
小 心 就 会 变 得 毫 无 反应 。 


你 可 能 听 过 事件 循环 这 个 术语 ,， 它 是 用 于 描述 队列 工作 方式 的 。 所 谓 














事件 循环 ， 就 像 代码 从 一 个 循环 中 不 断 取出 而 运行 一 样 : 


runYourScript(); 
while (atLeastOneEventIsQueued) { 
fireNextQueuedEvent(); 


}; 


这 隐 含 着 一 个 意思 , 即 触发 的 每 个 事件 都 会 位 于 堆栈 轨迹 的 底部 。 关 
于 这 一 点 ，1.4 贡 会 进一步 阐述 。 





事件 的 易 调 度 性 是 JavaScript 语言 最 大 的 特色 之 一 。 像 setTimeout 
这 样 的 异步 函数 只 是 简单 地 做 延迟 执行 ， 而 不 是 孵化 新 的 线程 。 
JavaScript 代码 永远 不 会 被 中 断 ， 这 是 因为 代码 在 运行 期 间 只 需要 排 
队 事件 即 可 ， 而 这 些 事 件 在 代码 运行 结束 之 前 不 会 被 触发 。 


下 一 节 将 更 细致 地 考查 异步 JavaScript 代码 的 构造 块 。 











1.2 异步 函数 的 类 型 











每 一 种 JavaScript 环境 都 有 自己 的 异步 浮 数 集 。 有 些 函 数 ， 如 
setTimeout 和 setIntervaL， 是 各 种 JavaScript 环境 普遍 都 有 的 。 
另 一 些 了 图 数 则 专属 于 某 些 浏 览 器 或 某 几 种 服务 器 端 框架 。JavaScript 
环境 提供 的 异步 函数 通常 可 以 分 为 两 大 类 : LO 函数 和 计时 函数 。 如 
果 想 在 应 用 中 定义 复杂 的 异步 行为 , 就 要 使 用 这 两 类 异步 函数 作为 基 
本 的 构造 块 。 











1.2.1 异步 的 |/O 函 数 


创造 Node.js， 并 不 是 为 了 人 们 能 在 服务 器 上 运行 JavaScript， 仅 仅 是 
为 Ryan Dahl 想 要 一 个 建立 在 某 高 级 语言 之 上 的 事件 驱动 型 服务 器 
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框架 ,JavaScript 磁 巧 就 是 适合 干 这 个 的 语言 ,为 什么 ”因为 JavaScript 
语言 可 以 完美 地 实现 非 阻塞 式 IO。 











在 其 他 语言 中 ,一 不 小 心 就 会 “阻塞 ”应 用 (通常 是 运行 循环 ) 直到 
完成 IO 请 求 为 止 。 而 在 JavaScript 中 ， 这 种 阻塞 方式 几乎 沦 为 无 稽 
之 谈 。 类 似 如 下 的 循环 将 永远 运行 下 去 ， 不 可 能 停 下 来 。 











var ajaxRequest = new XMLHttpRequest; 

ajaxRequest.open('GET', url); 

ajaxRequest.send(null); 

while (ajaxRequest.readyState === XMLHttpRequest.UNSENT) { 
// readyState 在 循环 返回 之 前 不 会 有 更 改 。 

}; 


相反 ， 我 们 需要 附加 一 个 事件 处 理 器 ， 随 即 返 回 事件 队列 。 


var ajaxRequest = new XMLHttpRequest; 

ajaxRequest.open('GET', url); 

ajaxRequest.send(null); 

ajaxRequest.onreadystatechange = function() { 
A ss 

}; 


就 是 这 么 回 事 。 不论 是 在 等 待 用 户 的 按键 行为 , 还 是 在 等 竺 远程 服务 
器 的 批量 数据 ， 所 需要 做 的 就 是 定义 一 个 回调 ， 除 非 JavaScript 环境 
提供 的 某 个 同步 IO 函数 已 经 替 我 们 完成 了 阻塞 。 





在 浏览 器 端 ，Ajax 方法 有 一 个 可 设置 为 false 的 async 选项 (但 永 
远 、 永 远 别 这 么 做 )， 这 会 挂 起 整个 浏览 需 窗 格 直到 收 到 应 答 为 止 。 
在 Node.js 中 ， 同 步 的 API 方法 在 名 称 上 会 有 明确 的 标示 ， 壁 如 
fs.readFileSync。 编写 短小 的 脚本 时 ,这些 同 步 方 法 会 很 方便 。 但 
是 , 如 果 所 编写 的 应 用 需要 处 理 并 行 的 多 个 请 求 或 多 项 操作 ， 则 应 该 
避免 使 用 它们 。 可 在 今天 ， 还 有 哪个 应 用 不 是 这 样 的 呢 ? 








有 些 IO 函数 既 有 同步 效应 ， 也 有 异步 效应 。 举 例 来 说 ， 在 现代 浏览 
器 中 操纵 DOM 对 象 时 ， 从 脚本 角度 看 ， 更 改 是 即时 生效 的 ， 但 从 视 
效 角度 看 ， 在 返回 事件 队列 之 前 不 会 演 染 这 些 DOM 对 象 更 改 。 这 可 
以 防止 DOM 对 象 被 演 染 成 不 一 致 的 状态 。 关 于 这 点 ， 可 访问 
http://jsfiddle.net/ TrevorBurnham/SNBYV/， 查 看 一 个 简单 的 演示 。 


console.log 是 异步 的 吗 ? 
WebKit 的 consote.Log 由 于 表现 出 异步 行为 而 让 很 多 开发 者 惊 这 
不 已 。 在 Chrome 或 Safari 中 ， 以 下 这 段 代 码 会 在 控制 台 记 录 
{foo:bar}。 


EventModel/log.js 
var obj = {}; 
console.log(obj); 
obj.foo = 'bar'; 


怎么 会 这 样 ? WebKit 的 ConsotLe .Log 并 没有 立即 拍摄 对 象 快 照 ， 
相反 ， 它 只 存储 了 一 个 指向 对 象 的 引用 ， 然 后 在 代码 返回 事件 队 
列 时 才 去 拍摄 快照 。 


Node 的 console.10g 是 另 一 回 事 ， 它 是 严格 同步 的 ， 因 此 同样 的 
代码 输出 的 却 为 {}。 








JavaScript 采 用 了 非 阻塞 式 IO, 这 对 新 手 来 说 是 最 大 的 一 个 障碍 , 但 
这 同样 也 是 该 语言 的 核心 优势 之 一 。 有 了 非 阻 塞 式 TO， 就 能 自然 而 
然 地 写 出 高 效 的 基于 事件 的 代码 。 





1.2.2 异步 的 计时 函数 


我 们 已 经 看 到 ， 异 步 消 数 非常 适合 用 于 LO 操作 ,但 有 些 时 候 , 我 们 
仅仅 是 因为 需要 异步 而 想 要 异步 性 。 换 名 话说, 我 们 想 让 一 个 函数 在 














一 


8 | 第 1 章 深入 理解 JavaScript 事件 





将 来 某 个 时 刻 再 运行 一 一 这 样 的 了 本数 可 能 是 为 了 作 动画 或 模拟 。 基于 
时 间 的 事件 涉及 两 个 著名 的 函数 ， 即 setTimeout 与 setInterval。 


遗憾 的 是 , 这 两 个 著名 的 计时 器 函数 都 有 自己 的 一 些 缺 陷 。 正 如 我 们 
在 1.1.2 节 中 看 到 的 ,其 中 有 个 缺陷 是 无 法 弥补 的 : 当 同 一 个 JavaScript 
进程 正 运行 着 代码 时 ， 任 何 JavaScript 计时 函数 都 无 法 使 其 他 代码 运 
行 起 来 .但 是 ,即便 容忍 了 这 一 局 限 性 , setTimeout 及 setInterval 
的 不 确定 性 也 会 令 人 犯 休 。 下 面 是 一 个 示例 。 




















EventModel/fireCount.js 

var fireCount = 0; 

var start = new Date; 

var timer = setInterval (function() { 

if (new Date-start > 1000) { 

clearInterval (timer); 
console.log(fireCount); 
return; 


} 
fireCount++; 
}, 0); 


如 果 使 用 setInterval 调度 事件 且 延 迟 设 定 为 0 毫秒 ， 则 会 尽 可 能 
频繁 地 运行 此 事件 ， 对 吗 ?” 那么 ， 在 运行 于 高 速 英 特 尔 这 处 理 器 之 
上 的 现代 浏览 器 中 ， 此 事件 的 触发 频率 到 底 如 何 呢 ? 


大 约 为 200 次 / 秒 。 这 是 Chrome 、Safari 和 Firefox 等 浏览 器 的 平均 值 。 
在 Node 环 境 下 , 此 事件 的 触发 频率 大 约 能 达到 1000 次 / 秒 。( 若 使 用 
setTimeout 来 调度 事件 ， 重复 这 些 实验 也 会 得 到 类 似 的 结果 。) 作 
为 对 比 ,如 果 将 setInterval 替换 成 简单 的 white 循 环 , 则 在 Chrome 
中 此 事件 的 触发 频率 将 达到 400 万 次 / 秒 ,而 在 Node 中 会 达到 500 万 
次 / 秒 ! 


这 是 怎么 回 事 ?最 后 我 们 发 现 ，setTimeout 和 setInterval 就 是 
想 设 计 成 慢 吞 吞 的 ! 事实 上 ，HTML 规范 ( 这 是 所 有 主要 浏览 器 都 遵 
守 的 规范 ) 推行 的 延 时 /时 隔 的 最 小 值 就 是 4 毫秒 ! ” 





那么 , 如 果 需 要 更 细 粒 度 的 计时 , 该 怎么 办 呢 ? 有 些 运 行 时 环境 提供 
了 备 选 方案 


口 在 Node 中 ，process.nextTick 人 允许 将 事件 调度 成 尽 可 能 快 地 触 
发 。 对 于 笔者 的 系统 , process.nextTick 事件 的 触发 频率 可 以 超 
过 10 万 次 / 秒 。 

口 一 些 现代 浏览 器 ( 售 IE9+ ) 带 有 一 个 _ requestAnimationFrame 

函数 。 此 郴 ee 一 方面 , 它 允 许 以 60+ 帧 / 秒 的 速度 运行 
JavaScript 动画 ; 另 一 方面 ， 它 又 避免 后 台 选 项 卡 运 行 这 些 动画 ， 
从 而 节约 CPU 在 最 新 版 的 Chrome 浏览 器 中 , 甚至 能 实现 亚 
毫秒 级 的 精度 。” 


这 些 计时 函数 是 异步 JavaScript 混 饭 吃 的 家 伙 什 儿 ， 但 永远 不 要 
setTimeout 和 setInterval 就 是 些 不 精确 的 计时 工具 。 在 
Node 中 ,如 果 只 是 想 产 生 一 个 短 时 延迟 ,请 使 用 process.nextTick。 
在 浏览 器 端 ， 请 尝试 使 用 垫 片 技术 (shim ) ”: 在 支持 
requestAnimationFrame 的 浏览 器 中 ， 推 荐 使 用 


requestAnimationFrame; 在 不 支持 requestAnimationFrame 的 

















@ 参见 http:/www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#dom- 
windowtimers-settimeout。 

@ 参见 http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub- 
millisecond-precision。 

@) http://paulirish.com/2011/requestanimationframe-for-smart-animating/。 热 片 技 术 可 简 
述 为 ， 它 负责 将 一 个 新 的 API 引入 到 一 个 旧 的 环境 中 ， 且 仅仅 依靠 旧 环境 中 已 有 
的 手段 来 实现 。 一 一 译 者 注 
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浏览 器 中 ， 则 退 而 使 用 setTimeout。 


到 这 里 ， 关 于 JavaScript 基本 异步 函数 的 简要 概览 就 结束 了 。 但 怎样 
才能 知道 一 个 函数 到 底 何 时 异步 呢 ? 下 一 节 中 , 我 们 在 亲自 编写 异步 
函数 的 同时 再 思考 这 个 问题 。 


1.3 ”异步 函数 的 编写 


JavaScript 中 的 每 个 异步 函数 都 构建 在 其 他 某 个 或 菜 些 异步 函数 之 
上 。 几 是 异步 函数 ， 从 上 到 下 (一 直到 原生 代码 ) 都 是 异步 的 ! 








反之 亦 然 : 任何 函数 只 要 使 用 了 异步 的 函数 ， 就 必须 以 异步 的 方式 给 

出 其 操作 结果 。 正 如 我 们 在 1.1.2 节 学 到 的 ，JavaScript 并 没有 提供 一 

种 机 制 以 阻止 函数 在 其 异步 操作 结束 之 前 返回 。 事实 上 , 除非 函数 返 
否则 不 会 触发 任何 异步 事件 。 











本 节 将 考察 异步 函数 设计 的 一 些 常 见 模式 。 我 们 将 看 到 有 些 函 数 如 反 
复 无 常 的 小 人 ,非得 等 到 特定 时 候 才 下 决心 成 为 异步 的 。 不过, 我 们 
先 来 精确 地 定义 异步 函数 。 


1 何 时 称 函 数 为 异步 的 


3: 

Ts 数 这 个 术语 有 点 名 不 副 实 : 调用 一 个 函数 时 , 程序 只 在 该 函数 

返回 之 后 才能 继续 。JavaScript 写 手 如 果 称 一 个 函数 为 “异步 的 ”， 

其 意思 是 这 个 函 0 后 者 取 自 于 事件 

a a 函数 是 作为 参数 传递 给 前 者 的 ， ee 
We 一 个 取 用 回调 的 异步 隆 数 永远 都 能 通过 














全 
wW 


异步 函数 的 编写 "11 


var functionHasReturned = false; 
asyncFunction(function() { 
console.assert(functionHasReturned); 
}); 
functionHasReturned = true; 
异步 函数 还 涉及 男 一 个 术语 , 即 非 阻 塞 。 非 阻塞 这 个 词 强调 了 异步 后 
数 的 高 速度 : 异步 MySQL 数据 库 驱 动 程序 做 一 个 查询 可 能 要 花 上 一 
小 时 , 但 负责 发 送 查 询 请 求 的 那个 函数 却 能 以 微 秒 级 速度 返回 。 这 对 
于 那些 需要 快速 处 理 海量 请 求 的 网 站 服务 需 来 说 ， 绝 对 是 个 福音 。 




















通常 ， 那 些 取 用 回调 的 函数 都 会 将 其 作为 自己 的 最 后 一 个 参数 。( 可 
惜 的 是 ， 老 资格 的 setTimeout 和 setInterval 都 是 这 一 约定 的 特 
例 。) 不 过 ， 有 些 异步 函数 也 会 间接 取 用 回调 ， 它 们 会 返回 Promise 
对 象 或 使 用 PubSub 模 式 。 本 书 稍 后 就 会 介绍 这 些 异步 设计 模式 。 








遗憾 的 是 , 要 想 确 认 菜 个 函数 异步 与 否 , 唯一 的 方法 就 是 审查 其 源 代 
码 。 有些 同步 函数 却 拥 有 看 起 来 像 是 异步 的 API， 这 或 者 是 因为 它们 
将 来 可 能 会 变 成 异步 的 , 又 或 者 是 因为 回调 这 种 形式 能 方便 地 返回 多 
个 参数 。 一 旦 存疑 ， 请 别 指望 函数 就 是 异步 的 。 





1.3.2 ”间或 异步 的 函数 


有 些 函 数 某 些 时 候 是 异步 的 , 但 其 他 时 候 却 不 然 。 举 个 例子 ，jQuery 
的 同名 函数 ( 通常 记 作 $ ) 可 用 于 延迟 函数 直至 DOM 已 经 结束 加 载 。 
但 是 ， 若 DOM 早已 结束 了 加 载 ， 则 不 存在 任何 延迟 ，$ 的 回调 将 会 
立即 触发 。 














不 注意 的 话 , 这 种 行为 的 不 可 预知 性 会 带 来 很 多 麻烦 。 我 曾经 看 到 也 
犯 过 这 样 一 个 错误 ， 即 假定 $ 会 在 已 加 载 本 页 面 其 他 脚本 之 后 再 运行 
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一 个 函数 。 


// application.js 
$(function() { 
utils.1log('Ready'); 
站 


// utils.js 
window.utils = { 
log: function() { 
if (window.console) console.log.apply(console, arguments); 
} 
}; 


<script src ="application.js"></script> 
<script src = "util.js"></script> 


这 段 代 码 运行 得 很 好 , 但 前 提 是 浏览 器 并 未 从 缓存 中 加 载 页 面 ( 这 会 
导致 DOM 早 在 脚本 运行 之 前 就 已 加 载 就 绪 )。 如 果 出 现 这 种 情况 ， 
传递 给 $ 的 回调 就 会 在 设置 utils.1log 之 前 运行 ， 从 而 导致 一 个 错 
误 。( 为 了 避免 这 种 情况 ， 应 该 采用 一 种 更 现代 的 管理 客户 端 依赖 性 
的 方法 。 请 参阅 第 6 章 。) 





下 面 来 看 男 一 个 例子 。 


1.3.3 ”缓存 型 异步 函数 


间或 异步 的 函数 有 一 个 常见 变种 是 可 缓存 结果 的 异步 请 求 类 函数 。 举 
例 来 说 ， 假 设 正在 编写 一 个 基于 浏览 器 的 计算 需 ， 它 使 用 了 网 页 
Worker 对 象 以 单独 开 一 个 线程 来 进行 计算 。( 第 5 章 将 介绍 网 页 
Worker 对 象 的 API。 ) 主 脚本 看 起 来 像 这 样 : ” 








Q@ 访问 http://webworkersandbox.com/5009efc12245588e410002cf， 可 以 看 到 这 个 例子 
的 一 个 可 运行 版 本 。 
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var calculationCache = {}, 
calculationCallbacks = {}, 
mathWorker = new Worker('calculator.js'); 


mathWorker.addEventListener('message', function(e) { 
var message = e.data; 
calculationCache[message.formula] = message.result; 
calculationCallbacks[message.formula] (message.result); 
}); 


function runCalculation(formula, callback) { 
if (formula in calculationCache) { 
return callback(calculationCache[formulal]); 
二 
if (formula in calculationCallbacks) { 
return setTimeout(function() { 
runCalculation(formula, callback); 
}, 0); 
}; 
mathWorker.postMessage (formula); 
calculationCallbacks[formula] = callback; 


在 这 里 ， 当 结果 已 经 缓存 时 ，runCalculation 少数 是 同步 的 ， 否则 
就 是 异步 的 。 存 在 3 种 可 能 的 情景 。 


D 公式 已 经 计算 完成 ， 于 是 结果 位 于 calculationCache 中 。 这 种 

情况 下 ，runCalculation 是 同步 的 。 

口 公式 已 经 发 送 给 Worker 对 象 ， 但 尚未 收 到 结果 。 这 种 情况 下 ， 
runCalculation 设 定 了 一 个 延 时 以 便 再 次 调用 自身 ; 重复 这 一 过 

程 直到 结果 位 于 calculationCache 中 为 止 。 

口 公式 尚未 发 送 给 Worker 对 象 。 这 种 情况 下 , 将 会 从 Worker 对象 的 

'message ' 事 件 监 听 器 激活 回调 。 
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请 注意 , 在 第 2 种 和 第 3 种 情景 中 , 我 们 按照 两 种 不 同 的 方式 来 等 待 
任务 的 完成 。 这 个 例子 写成 这 样 ,就 是 为 了 演示 依据 哪 几 种 常见 方式 
来 等 待 某 些 东 西 发 生 改 变 ( 如 缓存 型 计算 公式 的 值 )。 是 不 是 应 该 倾 
向 于 其 中 某 种 方式 呢 ? 我 们 接着 往 下 看 。 





1.3.4 “异步 递归 与 回调 存储 


在 runCalculation 函数 中 , 为 了 等 待 Worker 对 象 完成 自己 的 工作 ， 
或 者 通过 延 时 而 重复 相同 的 函数 调用 〈 即 异 步 递归 )， 或 者 简单 地 存 
储 回调 结果 。 


哪 种 方式 更 好 呢 ? 乍 一 看 ,只 使 用 异步 递归 是 最 简单 的 ,因为 这 里 不 
再 需要 calculationCallbacks 对 象 。 出 于 这 个 目的 ，JavaScript 六 
手 常 常会 使 用 setTimeout ， 因 为 它 很 像 线 程 型 语言 的 风格 。 此 程序 
的 Java 版 本 可 能 会 有 这 样 一 个 循环 : 








while (!calculationCache.get(formula)) { 
Thread.sleep(0); 

}; 
但 是 , 延 时 并 不 是 免费 的 午餐 。 大 量 延 时 的 话 , 会 造成 巨大 的 计算 荷 
载 。 异 步 递归 有 一 点 很 可 怕 ， 即 在 等 待 任务 完成 期 间 ， 可 触发 之 延 
时 的 次 数 是 不 受 限 的 ! 此 外 ， 异 步 递 归还 毫 无 必要 地 复杂 化 了 应 用 
程序 的 事件 结构 。 基 于 这 些 原因 ， 应 将 异步 递归 视 作 一 种 “ 反 模 式 ” 
的 方式 。 














在 这 个 计算 带 例 子 中 , 为 了 避免 异步 递归 ,可 以 为 每 个 公式 存储 一 个 


1.3 “异步 函数 的 编写 


var calculationCache = {}, 
calculationCallbacks = {}, 
mathWorker = new Worker('calculator.js'); 
mathworker.addEventListener('message', function(e) { 
var message = e.data; 
calculationCache[message.formula] = message.result; 
calculationCallbacks[message.formulal 
.forEach(function(callback) { 
callback(message.result); 
}); 
}); 


function runCalculation(formula, callback) { 
if (formula in calculationCache) { 
return callback(calculationCache[formulal]); 
站 
if (formula in calculationCallbacks) { 
return calculationCallbacks[formulal] .push(callback); 
}; 
mathWorker.postMessage (formula); 
calculationCallbacks[formula] = [callback]; 
} 


没有 了 延 时 ,我们 的 代码 要 直观 得 多 ， 也 高 效 得 多 。 
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总 的 来 说 , 请 避免 异步 递归 。 仅 当 所 采用 的 库 提供 了 异步 功能 但 没有 
提供 任何 形式 的 回调 机 制 时 , 异步 递归 才 有 必要 。 如 果真 的 遇 到 这 种 
情况 ,要 做 的 第 一 件 事 应 该 是 为 该 库 写 一 个 补丁 。 或 者 , 干脆 找 一 个 








更 好 的 库 。 


1.3.5” 返 值 与 回调 的 混搭 


在 以 上 两 种 runCalculation 实现 中 , 有 时 会 用 到 返 值 技 术 。 
于 简洁 的 目的 而 随意 作出 的 选择 。 下 面 这 行 代码 


这 是 出 
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return callback(calculationCache[formulal]); 
很 容易 即 可 改写 成 


callback(calculationCache[formulal]); 
return; 


这 是 因为 并 没有 打算 使 用 这 个 返 值 ,这 是 JavaScript 的 一 种 普遍 做 法 ， 
而 且 通 常 无 害 





， 有 些 函 数 既 返回 有 用 的 值 ， 又 要 取 用 回调 。 这 类 情况 下 ， 切 记 
人 6 被 同步 调用 ( 返 值 之 前 )， 也 有 可 能 被 异步 调用 〈 返 值 之 
后 )。 


永远 不 要 定义 一 个 潜在 同步 而 返 值 却 有 可 能 用 于 回调 的 函数 。 举 个 例 
子 , 下 面 这 个 负责 打开 0 以 连 至 给 定 服务 器 的 函数 (使 
用 缓存 技术 以 确保 每 个 服务 器 只 连接 ) 就 违反 了 上 述 规则 。 








var webSocketCache = {}; 
function openWebSocket(serverAddress, callback) { 
var socket; 


if (serverAddress in webSocketCache) { 
socket = webSocketCache[serverAddress]; 


if (socket.readyState === WebSocket.OPEN) { 
callback(); 
} else { 
socket.onopen = .compose(callback, socket.onopen); 
ys 
} else { 


socket = new WebSocket(serverAddress); 
webSocketCache[lserverAddress] = socket; 





@ 参见 https://developer.mozilla.org/en/WebSockets/。 
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socket .onopen = callback; 
直 
return Socket 
}; 


i _.compose 定义 的 这 个 新 函数 既 
运行 了 caLLback， 又 运行 了 初始 的 socket .onopen 回调 。") 





这 段 代 码 的 问题 在 于 ,如 果 套 接 字 已 经 缓存 且 打 开 , 则 会 在 函数 返 值 
之 前 就 运行 回调 ， 这 会 使 以 下 代码 贿 演 。 





var socket = openWebSocket(url, function() { 
socket.send('Hello, server!'); 
}); 


怎么 解决 呢 ? 将 回调 封装 在 setTimeout 中 即 可 。 





if (socket.readyState === WebSocket.0PEN) { 
setTimeout(callback, 0); 

} else { 
ZA Bs 


_ 


这 里 使 用 延 时 会 让 人 感觉 是 在 东 拼 西 次 , 但 这 总 比 API 自 相 矛盾 要 好 
导 多 。 


SN 





在 本 节 中 , 我 们 看 到 了 一 些 编写 异步 荫 数 的 最 佳 实践 。 请 勿 依赖 那些 
看 似 始终 异步 的 函数 ,除非 已 经 阅读 其 源 代 码 。 请 避免 使 用 计时 器 方 
法 来 等 待 某 个 会 变化 的 东西 。 如 果 同 一 个 函数 既 返 值 又 运行 回调 , 则 
请 确保 回调 在 返 值 之 后 才 运 行 。 











一 次 消化 这 些 信息 确实 太 多 了 一 点 , 不 过 , 编写 好 的 异步 函数 确实 是 





人 参见 http://documentcloud.github.com/underscore/#compose。 
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写 出 优秀 JavaScript 代码 的 关键 所 在 。 


1.4 异步 错误 的 处 理 


像 很 多 时 浒 的 语言 一 样 ，JavaScript 也 允许 抛 出 异常 ， 随 后 再 用 一 个 
try/catch 语句 块 捕获 .如 果 抛 出 的 异常 未 被 捕获 ,大 多 数 JavaScript 
环境 都 会 提供 一 个 有 用 的 堆栈 轨迹 。 举 个 例子 ,下 面 这 段 代码 由 于 '{' 
为 无 效 JSON 对 象 而 抛 出 异常 。 





EventModel/stackTrace.js 

function JSONToObject(jsonStr) { 
return JSON.parse(jsonStr); 

} 

var obj = JSONToObject('f{'); 


《SyntaxError: Unexpected end of input 

at Object.parse (native) 

at JSONToObject (/AsyncJS/stackTrace.js:2:15) 

at 0bject.<anonymous> (/AsyncJS/stackTrace.js:4:11) 
堆栈 轨迹 不 仅 告诉 我 们 哪里 抛 出 了 错误 ， 而 且说 明了 最 初出 错 的 地 
方 : 第 4 行 代码 。 遗 憾 的 是 ， 自 顶 向 下 地 跟踪 异步 错误 起 源 并 不 都 这 
么 直截了当 。 在 本 节 中 ， 我 们 会 看 到 为 什么 throw 很 少 用 作 回 调 内 
错误 处 理 的 正确 工具 ， 还 会 了 解 如 何 设计 异步 API 以 绕 开 这 一 局 限 。 





1.4.1 回调 内 抛 出 的 错误 
如 果 从 异步 回调 中 抛 出 错误 ,会 发 生 什 么 事 ? 让 我 们 先 来 做 个 测试 。 
EventModel/nestedErrors.js 


setTimeout(function A() { 
setTimeout(function B() { 
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setTimeout(function C() { 
throw new Error('Something terrible has happened!'); 
}, 0); 
}, 0); 
}, 0); 


上 述 应 用 的 结果 是 一 条 极其 简短 的 堆栈 轨迹 。 





《Error: Something terrible has happened! 
at Timer.C (/AsyncjJS/nestedErrors.js:4:13) 


等 等 , A 和 B 发 生 了 什么 事 ? 为 什么 它们 没有 出 现在 堆栈 轨迹 中 ?这 
是 因为 运行 C 的 时 候 , A 和 B 并 不 在 内 存 堆 栈 里 。 这 3 个 函数 都 是 从 
事件 队列 直接 运行 的 。 





基于 同样 的 理由 ， 利 用 try/catch 语句 块 并 不 能 捕获 从 异步 回调 中 
抛 出 的 错误 。 下 面 进行 演示 。 


EventModel/asyncTry.js 
try { 
setTimeout(function() { 
throw new Error('Catch me if you can!'); 
}, 0); 
} catch (e) { 
console.error(e); 


} 


看 到 这 里 的 问题 了 吗 ? 这 里 的 try/catch 语句 块 只 捕获 setTimeout 
函数 自身 内 部 发 生 的 那些 错误 。 因 为 setTimeout 异步 地 运行 其 回 
调 ， 所 以 即使 延 时 设置 为 0， 回 调 抛 出 的 错误 也 会 直接 流向 应 用 程序 
的 未 捕获 异常 处 理 器 〈 请 参阅 1.4.2 节 )。 

















总 的 来 说 ， 取 用 异步 回调 的 函数 即使 包装 上 try/catch 语句 块 ， 也 
只 是 无 用 之 举 。( 特例 是 ， 该 异步 函数 确实 是 在 同步 地 做 某 些 事 且 容 
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易 出 错 。 例 如 , Node 的 fs.watch(file,callback) 就 是 这 样 一 个 函 
数 ， 它 在 目标 文件 不 存在 时 会 抛 出 一 个 错误 。) 正 因为 此 ，Node.js 中 
的 回调 几乎 总 是 接受 一 个 错误 作为 其 首 个 参数 , 这 样 就 允许 回调 自己 
来 决定 如 何 处 理 这 个 错误 。 举 个 例子 ， 下 面 这 个 Node 应 用 尝试 异步 
地 读 取 一 个 文件 ， 还 负责 记录 下 任何 错误 (如 “文件 不 存在 ”)。 














EventModel/readFile.js 
var fs = require('fs'); 
fs.readFile('fhgwgdz.txt', function(err, data) { 
if (err) { 
return console.error(err); 
}3 
console.log(data.toString('utf8')); 
}); 


客户 端 JavaScript 库 的 一 致 性 要 稍微 差 些 ， 不 过 最 常见 的 模式 是 ， 针 
对 成 败 这 两 种 情形 各 规定 一 个 单独 的 回调 。 ee ， Ajax 方法 就 遵 
循 了 这 个 模式 。 





< 


.get('/data', { 

success: successHandler, 
failure: failureHandler 
}); 


不 管 API 形态 像 什么 ， 始 终 要 记 住 的 是 ， 只 能 在 回调 内 部 处 理 源 于 
回调 的 异步 错误 。 异 步 尤 达 大 师 会 说 :“ 做 , 或 者 不 做 , 没有 试 试看 
一 说 。 


1.4.2 未 捕获 异常 的 处 理 


如 果 是 从 回调 中 抛 出 异常 的 , 则 由 那个 调用 了 回调 的 人 负责 捕获 该 异 
常 。 但 如 果 异 党 从 未 被 捕获 ， 叉 会 怎么 样 ? 这 时 ， 不 同 的 JavaScript 
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环境 有 着 不 同 的 游戏 规则 ……… 


1. 在 浏览 器 环境 中 





现代 浏览 器 会 在 开发 人 员 控 制 台 显示 那些 未 捕获 的 异常 , 接着 返回 事 
件 队 列 。 要 想 修改 这 种 行为 , 可 以 给 window.onerror 附加 一 个 处 理 
器 。 如 果 windows .onerror 处 理 器 返回 true, 则 能 阻止 浏览 器 的 默 
认错 误 处 理 行为 。 








window.onerror = function(err) { 

return true;  // 彻 底 忽 略 所 有 错误 
}; 
在 成 品 应 用 中 ， 会 考虑 某 种 JavaScript 错误 处 理 服务 ， 壁 如 
Errorception”。Errorception 提供 了 一 个 现成 的 windows .onerror 处 
理 吾 ,， 它 向 应 用 服务 器 报告 所 有 未 捕获 的 异常 , 接着 应 用 服务 器 发 送 
消息 通知 我 们 。 





2. 在 Node.js 环境 中 


在 Node 环境 中 ，window.onerror 的 类 似 物 就 是 process 对 象 的 
uncaughtException 事件 。 正 常情 况 下 ，Node 应 用 会 因 未 捕获 的 异 
常 而 立即 退出 。 但 只 要 至 少 还 有 一 个 uncaughtException 事件 处 理 
器 ，Node 应 用 就 会 直接 返回 事件 队列 。 








process.on('uncaughtException', function(err) { 
console.error(err); // 避 免 了 关 停 的 命运 ! 
}); 


但 是 ， 自 Node 0.8.4 起 ，uncaughtException 事件 就 被 废弃 了 。 据 





GD 参见 http://errorception.com/。 
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其 文档 "所 言 ， 

对 异常 处 理 而 言 , uncaughtException 是 一 种 非常 粗暴 的 机 制 ， 
它 在 将 来 可 能 会 被 放弃 …… 

请 勿 使 用 uncaughtException， 而 应 使 用 Domain 对 象 。 


Domain 对 象 又 是 什么 ”你 可 能 会 这 样 问 。Domain 对 象 是 事件 化 对 象 
(第 2 章 会 详细 讨论 )， 它 将 throw 转化 为 'error' 事 件 。 下 面 是 一 


个 例子 。 


EventModel/domainThrow.js 
var myDomain = require 


('domain').create(); 
myDomain.run(function() { 
) 


setTimeout(function() { 
throw new Error('Listen to me!') 
}, 50); 


}); 


myDomain.on('error', function(err) { 
console.log('Error ignored!'); 


}); 
源 于 延 时 事件 的 throw 只 是 简单 地 触发 了 Domain 对 象 的 错误 处 理 需 。 


《Error ignored! 
很 奇妙 , 是 不 是 ? Domain 对 象 让 throw 语句 生动 了 很 多 。 遗憾 的 是 ， 
仅 在 Node 0.8+ 环 境 中 才能 使 用 Domain 对 象 ; 在 我 写作 本 书 时 ， 
Domain 对 象 仍 被 视 作 试验 性 的 特性 。 更 多 信息 请 参阅 Node 文档 。” 














不 管 在 浏览 器 端 还 是 服务 器 端 , 全 局 的 异常 处 理 融 都 应 被 视 作 最 后 一 





http:/nodejs.org/docs/latest/apiprocess.html#process_event_Uncaughtexception。 





Q@ 参见 
@ 参见 http://nodejs.org/docs/latest/api/domain.html。 
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根 救 命 稻草 。 请 仅 在 调试 时 才 使 用 它 。 


1.4.3 ” 抛 出 还 是 不 抛 出 


遇 到 错误 时 , 最 简单 的 解决 方法 就 是 抛 出 这 个 错误 。 在 Node 代码 中 ， 
大 家 会 经 党 看 到 类 似 这 样 的 回调 : 

function(err) { 

if (err) throw err; 

Hs 

} 

在 第 4 章 中 ,我 们 会 经 常 沿用 这 一 做 法 。 但是， 在 成 品 应 用 中 ， 人 允许 
例 行 的 异常 及 致命 的 错误 像 足 皮 球 一 样 踢 给 全 局 处 理 器 , 这 是 不 可 接 
受 的 。 回 调 中 的 th row 相当 于 JavaScript 写 手 在 说 “现在 我 还 不 想 考 
如 果 抛 出 那些 自己 知道 肯定 会 被 捕获 的 异常 呢 ? 这 种 做 法 同样 凶险 
万 分 。2011 年 ，Isaac Schlueter ( npm 的 开发 者 ,在任 的 Node 开发 负 
责 人 ) 就 主张 try/catch 是 一 种 “ 反 模 式 ” 的 方式 。” 





try/catch 只 是 包装 着 漂亮 花 括 绝 的 goto 语句 。 一 旦 跑 去 处 理 
错误 ， 就 无 法 回 到 中 断 之 处 继续 向 下 执行 。 更 糟糕 的 是 ， 通 过 
th row 语句 的 代码 ， 完 全 不 知道 自己 会 跳 到 什么 地 方 。 返 回 错误 
码 的 时 候 ， 就 相当 于 正在 履行 合约 。 抛 出 错误 的 时 候 ， 就 好 像 在 
说 ,“ 我 知道 我 正在 和 你 说 话 ， 但 我 现在 不 想 搭理 你 ， 我 要 先 找 
你 老板 谈 谈 ”， 这 太 粗 俗 无 礼 了 。 如 果 不 是 什么 紧急 情况 ， 请 别 
这 么 做 ; 如 果 确 实 是 紧急 情况 ， 则 应 该 直接 般 演 掉 。 





@ 参见 https://groups.google.com/forum/#!topic/nodejs/1ESsssIxrUU。 
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Schlueter 提倡 完全 将 throw 用 作 断 言 似 的 构造 结构 ， 作 为 一 种 挂 起 
应 用 的 方式 一 一 当 应 用 在 做 完全 没 预料 到 的 事 时 , 即 挂 起 应 用 。Node 
社区 主要 遵循 这 一 建议 ， 尽 管 这 种 情况 可 能 会 随 着 Domain 对 象 的 出 
现 而 改变 。 


那么 , 关于 异步 错误 的 处 理 , 目前 的 最 佳 实践 是 什么 呢 ? 我 认为 应 该 
听从 Schlueter 的 建议 : 如 果 想 让 整个 应 用 停止 工作 ， 请 勇往直前 地 
大 胆 使 用 throw。 否则 , 请 认真 考虑 一 下 应 该 如 何 处 理 错误 。 是 想 给 
用 户 显 示 一 条 出 错 消 息 吗 ? 是 想 重 试 请 求 吗 ?” 还 是 想 唱 一 曲 “ 和 雏菊 铃 
之 歌 ”"? 那 就 这 么 处 理 吧 ， 只 是 请 尽 可 能 地 靠近 错误 源头 。 





1.5“” 骨 套 式 回调 的 解 赃 套 








JavaScript 中 最 常见 的 反 模式 做 法 是 ， 回 调 内 部 再 般 套 回调 。 还 记得 
前 言 里 提 到 的 金字 塔 厄运 吗 ? 我 们 先 来 看 一 个 具体 的 例子 , 你 也 可 能 
在 Node 服务 器 上 看 到 过 类 似 的 代码 。 
function checkPassword(username, passwordGuess, callback) { 
Var queryStr = 'SELECT * FROM User WHERE Username = ?'; 
db.query(queryStr, username, function (err, result) { 
if (err) throw err; 


hash(passwordGuess, function(passwordGuessHash) { 
callback(passwordGuessHash === result['password hash']); 


这 里 定义 了 一 个 异步 函数 checkPassword， 它 触发 了 另 一 个 异步 
基数 db.query， 而 后 者 又 可 能 触发 另外 一 个 异步 函数 hash。( 在 




















QD 1892 年 著名 的 歌曲 Daisy BeW， 这 是 第 电脑 模拟 人 声 唱 出 的 歌曲 。 一 一 译 者 注 
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好 





1.5 ”内 套 式 





阅读 代码 之 前 , 无 法 确认 这 些 函 数 是 否 真 的 异步 , 但 这 里 的 几 个 函 
数理 应 如 此 。) 


这 段 代 码 有 什么 问题 呢 ? 目前 为 止 , 没有 任何 问题 。 它 能 用 , 而 且 简 
洁 明 了 。 但 是 ， 如 果 试 图 向 其 添加 新 特性 ， 它 就 会 变 得 毛里 毛 躁 、 险 

象 环 生 ,比如 去 处 理 那 个 数据 库 错误 ,而 不 是 抛 出 错误 (请 参阅 1.4.3 
节 )、 记 录 尝 试 访问 数据 库 的 次 数 、 阻 塞 访问 数据 库 ， 等 等 。 











山 套 式 回 调 诱惑 我 们 通过 添加 更 多 代码 来 添加 更 多 特性 , 而 不 是 将 这 
些 特性 实现 为 可 管理 、 可 重用 的 代码 片段 。checkPassword 有 一 种 
可 以 避免 出 现 上 述 苗头 的 等 价 实现 方式 ， 如 下 : 














function checkPassword(username, passwordGuess, callback) { 
var passwordHash; 
Var queryStr = 'SELECT * FROM user WHERE Username = ?'; 
db.query(qyeryStr, username, queryCallback); 


function queryCallback(err, result) { 
if (err) throw err; 
passwordHash = result['password hash']; 
hash(passwordGuess, hashCallback); 

} 


function hashCallback(passwordGuessHash) { 
callback(passwordHash === passwordGuessHash ) ; 
} 
} 
这 种 写法 更 哆 呈 一 些 , 但 读 起 来 更 清晰 ， 也 更 容易 扩展 。 由 于 这 里 赋 
了 予 了 异步 结果 ( 即 oe te 更 宽广 的 作用 域 ， 所 以 获得 了 更 
大 的 灵活 性 。 








按照 惯例 ， 请 避免 两 层 以 上 的 函数 嵌 套 。 关 键 是 找到 一 种 在 激活 异步 
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调用 之 函数 的 外 部 存储 异步 结果 的 方式 , 这 样 回调 本 里 就 没有 必要 青 


衣 套 了 。 





如 果 这 样 听 起 来 有 点 语 敬 难 懂 , 请 别 担心 。 我 们 在 后 续 几 童 中 会 看 到 
大 量 的 异步 事件 例子 , 那里 的 异步 事件 顺序 运行 且 没 有 骨 套 式 事件 处 
理 需 。 











1.6 ”小结 


本 革 阐 释 了 JavaScript 的 单线 程 性 为 什么 既是 福利 又 是 祸害 。 使 用 得 
当 的 话 , 它 会 使 代码 优美 且 没 有 那些 多 线程 应 用 中 泛滥 成 灾 的 可 怕 竞 
态 条 件 。 不 过 ， 这 需要 你 形成 正确 的 思维 定 势 并 掌握 恰当 的 技术 。 


本 书 其 余 章节 将 介绍 JavaScript 中 处 理事 件 时 用 到 的 一 些 库 和 设计 模 
式 。 我 们 考查 的 所 有 示例 都 可 以 运行 于 主流 的 浏览 器 或 未 经 改动 的 
Nodejs 环境 。 不 过 ， 编 写 JavaScript 并 不 是 产生 JavaScript 代码 的 唯 
一 途径 。 关 于 其 他 一 些 有 趣 编辑 器 的 概况 ， 请 参阅 附录 A。 


这 里 值得 提 一 下 ,JavaScript 中 存在 一 种 多 线程 性 :可 以 孵化 出 Worker 
进程 。 每 个 孵化 出 的 进程 都 可 以 与 其 他 进程 交换 数据 ， 甚 限制 等 同 于 
任何 其 他 IO 进程 。Worker 对 象 使 得 我 们 有 可 能 利用 多 个 内 核 ， 同 时 
不 会 破坏 JavaScript 的 游戏 规则 (代码 不 可 能 被 中 断 ; 变量 只 有 处 于 
其 作用 域内 部 时 才 是 可 访问 的 ) 关于 Worker 对 象 的 更 多 内 容 , 请 参 
见 第 5 章 。 

接 下 来 两 章 将 专门 讨论 两 种 基本 的 设计 模式 。PubSub 模式 是 一 种 将 
回调 赋值 给 已 命名 事件 的 回调 组 织 方式 ， 而 Promise 对 象 是 一 种 表示 
一 次 性 事件 的 直观 对 象 。 















































在 上 一 章 中 ， 我 们 了 解 了 JavaScript 异步 事件 的 工作 方式 。 但 在 实践 
中 到 底 应 该 怎样 处 理 这 些 事件 呢 ? 














这 个 问题 听 起 来 好 像 很 愚蠢 。 直接 给 应 用 程序 关心 的 每 个 事件 都 附加 
一 个 处 理 带 不 就 行 了 吗 ? 然而 , 一 旦 单一 的 事件 有 着 多 重 的 后 果 , 这 
种 “一 事 一 处 理 ” 的 方式 将 迫使 处 理 融 规模 和 急剧 膨胀 。 








假设 我 们 正在 构建 一 个 类 似 于 Google Docs 的 网 页 版 文字 处 理 程序 。 
每 当 用 户 按 下 一 个 键 时 , 都 要 做 很 多 事情 : 新 键入 的 字符 必须 显示 在 
屏幕 上 ; 插入 点 必须 向 后 移动 ; 这 次 键入 动作 必须 推 人 本 地 的 撤销 动 
作 历 史记 录 中 , 且 必 须 与 服务 器 进行 同步 ; 拼写 检查 功能 也 必须 运行 
起 来 ; 字数 统计 和 页 数 统 计 也 需要 加 以 更 新 。 用 一 个 keypress 处 理 
器 就 想 完成 所 有 这 些 任 务 甚 至 更 多 任务 ， 这 显然 会 邻 人 望而却步 。 

















从 纯 机 械 论 的 角度 看 , 每 项 因 响 应 事件 而 执行 的 任务 都 确实 必须 由 事 
件 处 理 咒 发 起 。 但 是 ， 从 人 类 感性 的 角度 出 发 ， 这 个 庞大 的 事件 处 理 
顺 通 常 最 好 能 替换 成 更 具 延 展 性 的 、 动 态 的 构造 一 一 一 种 可 以 在 运行 
时 对 其 增 减 任务 的 构造 。 简 而 言 之 , 我 们 希望 使 用 分 布 式 事件 : 事件 
的 蝴蝶 偶然 扁 动 了 下 翅膀 ， 整 个 应 用 到 处 都 引发 了 反应 。 
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在 本 章 中 , 你 将 会 学 到 如 何 使 用 PubSub ( Publish/Subscribe, 意 为 “发 
布 /订阅 ”) 模式 来 分 发 事件 。 沿 着 这 个 思路 ， 我 们 会 看 到 PubSub 模 
式 的 一 些 具体 表 现 : Node 的 EventEmitter 对 象 、Backbone 的 事件 
化 模型 和 jQuery 的 自 定 义 事件 。 在 这 些 工 具 的 帮助 下 ， 我 们 能 解 髓 
套 那些 拒 套 式 回调 , 减少 重复 元 余 , 最 终 编 写 出 易于 理解 的 事件 驱动 
型 代码 。 











2.1 PubSub 模式 


从 JavaScript 诞生 之 日 起 ， 浏 览 吉 就 允许 向 DOM 元 素 附 加 事件 处 理 
器 ， 形 如 : 


link.onclick = clickHandler; 


啊 哈 ,一目了然 ! 只 不 过 要 提醒 你 一 点 : 如 果 想 向 一 个 元 素 附 加 两 个 
点 击 事件 处 理 器 ， 则 必须 自行 用 一 个 封装 函数 汇集 这 两 个 处 理 需 。 











link.onclick = function() { 
clickHandlerl.apply(this, arguments); 
clickHandler2.apply(this, arguments); 
}; 
这 不 仅 宛 长 重复 ， 而 且 也 会 制造 出 浮肿 的 、“ 全 能 的 ”处 理 器 函数 。 
正 因为 此 ,W3C 于 2000 年 向 DOM 规 范 中 添加 了 addEventListener 
方法 ， 而 jQuery 将 其 抽象 成 bind 方法 。 使 用 bind， 很 容易 对 任何 
元 素 或 元 素 集合 发 生 的 任何 事件 添加 任意 多 的 处 理 器 , 量 完 全 不 用 担 
心 这 些 处 理 器 因 摩 肩 接 是 而 出 现 踩踏 事故 。 











$(Link) 
.bind('click', clickHandlerl) 
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.bind('click', clickHandler2); 
(在 jQuery1.7+ 中 , 优先 使 用 新 的 on 语法 而 不 用 bind。" 那 里 也 提供 
了 click 方 法 ， 不 过 它 只 是 bind('click'，,... ) 的 简写 。 但 是 ， 笔 
者 倾向 于 一 直 使 用 bind/on。 ) 








从 软件 架构 的 角度 看 ，jQuery 将 Link 元 素 的 事件 发 布 给 了 任何 想 订 
阅 此 事件 的 人 。 这 正 是 称 其 为 PubSub 模 式 的 原因 。 











在 老式 DOM 的 事件 API 中 ， 绑 定 至 事件 意味 着 要 编写 object. 
onevent=. . .这 样 的 代码 ,但 现在 它 差 不 多 被 人 忘 光 了 ， 人 们 都 转 
投 至 PubSub 的 怀抱 了 。Node 的 API 架构 师 因为 太 喜 欢 PubSub， 所 
以 决定 包含 一 个 一 般 性 的 PubSub 实体 。 这 个 实体 叫做 EventEmitter 
(事件 发 生 器 ), 其 他 对 象 可 以 继承 它 。Node 中 几乎 所 有 的 IO 源 都 是 
EventEmitter 对 象 : 文件 流 、HTTP 服务 器 ， 甚 至 是 应 用 进程 本 身 。 
以 下 例 为 证 。 











Distributed/processExit.js 
['room', ‘moon', ‘cow jumping over the moon'] 
.forEach(function(name) { 

process.on('exit', function() { 
console.log('Goodnight, ' + name); 
Rs 
}); 


浏览 器 端 存在 着 无 数 的 单机 版 PubSub 库 。 此 外 ,很 多 MVC 框架 ， 


如 Backbonejs 和 Spine， 都 提供 了 自己 的 类 EventEmitter 模块 。 本 章 
稍 后 再 更 详细 地 讨论 Backbone。 








@ 参见 http://apijquery.com/on/。 
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2.1.1 EventEmitter 对 象 


我 们 用 Node 的 EventEmitter 对 象 作 为 PubSub 接口 的 例子 。 
EventEmitter 有 着 简单 而 近乎 最 简化 的 设计 。 








要 想 给 EventEmitter 对 象 添加 一 个 事件 处 理 器 ， 只 要 以 事件 类 型 和 事 
件 处 理 器 为 参数 调用 on 方法 即 可 。 
emitter.on('evacuate', function(message) { 


console.log(message); 
}); 


enit ( 意 为 “触发 ") 方法 负责 调用 给 定 事件 类 型 的 所 有 处 理 器 。 举 
个 例子 ， 下 面 这 行 代码 ， 








emitter.emit('evacuate' ); 
将 调用 evacuate 事件 的 所 有 处 理 器 。 
请 注意 , 这 里 的 术语 事件 跟 事件 队列 没有 任何 关系 。 请 参阅 2.1.3 市。 


使 用 emit 方法 触发 事件 时 ， 可 以 添加 任意 多 的 附加 参数 。 所 有 参数 
均 传 递 至 所 有 处 理 器 。 


emitter.emit('evacuate', 'Woman and children first!'); 


事件 名 称 不 存在 任何 限制 ， 然 而 Node 相关 文档 还 是 规定 了 一 条 有 
用 的 约定 。 





通常 ， 事 件 名 称 会 表示 为 一 个 驼峰 式 大 小 写 混合 的 字符 囊 。” 





@ 参见 http:/nodejs.org/docs/latest/api/events.html。 驼 峰 式 大 小 写 是 一 种 命名 惯例 ， 
的 是 增强 标识 符 的 可 辨识 度 和 可 读 性 ， 因 写 得 高 低 错 落 如 驼峰 而 得 名 ， 可 以 分 月 
camelCased 、CamelCased 等 多 种 形式 。 一 一 译 者 注 


尘 丁 
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EventEmitter 对 象 的 所 有 方法 都 是 公有 的 ， 但 一 般 约 定 只 能 从 
EventEmitter 对 象 的 “内 部 ”触发 事件 。 也 就 是 说 ， 如 果 有 一 个 对 象 
继承 了 EventEmitter 原型 并 使 用 了 this.emit 方法 来 广播 事件 ， 则 
不 应 该 从 这 个 对 象 之 外 的 其 他 地 方 再 调用 其 emit 方法 。 








2.1.2 ” 玩 转 自己 的 PubSub 

PubSub 模式 的 实现 如 此 简单 ， 以 至 于 用 十 几 行 代码 就 能 建立 自己 的 
PubSub 实现 。 对 于 支持 的 每 种 事件 类 型 ， 唯 一 需要 存储 的 状态 值 就 
是 一 个 事件 处 理 器 清单 。 





PubSub = {handlers: {}} 


需要 添加 事件 监听 囊 时 ， 只 要 将 监听 器 推 人 数组 末尾 即 可 (这 意味 着 
总 是 会 按照 添加 监听 顺 的 次 序 来 调用 监听 器 )。 





PubSub .on = function(eventType, handler) { 
if (!(eventType in this.handlers)) { 
this.handlers[eventType] = []; 
} 


this.handlers[eventTypel] .push(handler); 
return this; 


} 
接着 ， 等 到 触发 事件 的 时 候 ， 再 循环 遍历 所 有 的 事件 处 理 咒 。 





PubSub .emit = function(eventType) { 
var handlerArgs = Array.prototype.slice.call(arguments, 1); 
for (var i = 0; i < this.handlers[eventTypel].length; i++) { 
this,handters[eventType][il.appty(this，handLerArgs ) ; 
} 
return this; 


} 
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就 是 这 么 简单 ! 现在 只 实现 了 Node 之 EventEmitter 对 象 的 核心 部 分 。 
(还 没 实现 的 重要 部 分 只 剩 下 移 除 事件 处 理 需 及 附加 一 次 性 事件 处 理 
右 等 功能 。) 








当然 ， 各 种 PubSub 实现 在 特性 方面 会 稍 有 不 同 。jQuery 团队 注意 到 
jQuery 库 里 到 处 都 在 用 几 个 不 同 的 PubSub 实现 ， 于 是 决定 在 jQuery 
1.7 中 将 它们 抽象 为 $. CaLLpacks"。 这 样 就 不 再 用 数组 来 存储 各 种 事 
件 类 型 对 应 的 事件 处 理 器 ， 而 可 以 转 用 $. CaLLbacks 实例 。 





很 多 PubSub 实现 负责 解析 事件 字符 串 以 提供 一 些 特殊 功能 。 举 个 例 
子 ， 你 也 许 熟悉 jQuery 的 名 称 空间 化 事件 : 如 果 绑 定 了 名 称 为 
"click.tbb" 和 "hover.tbb" 的 两 个 事件 ， 则 简单 地 调用 
unbind(" .tbb") 就 可 以 同时 解 绑 定 它们 。Backbone,js 允许 向 "all" 
事件 类 型 绑 定 事 件 处 理 器 , 这 样 不 管 发 生 什 么 事 , 都 会 导致 这 些 事件 
处 理 器 的 触发 。jQuery 和 Backbone.js 都 支持 用 空格 隔 开 多 个 事件 来 
同时 绑 定 或 触发 多 种 事件 类 型 ， 辟 如 "keypress mousemove"。 








2.1.3 同步 性 


尽管 PubSub 模式 是 一 项 处 理 异步 事件 的 重要 技术 ,但 它 内 在 跟 异 步 
没有 任何 关系 。 请 考虑 下 面 这 上 段 代 码 : 

$('input[type=submit]') 

.on('click', function() { console.log('foo'); }) 


.trigger('click'); 
console.log('bar'); 


这 有 段 代码 的 输出 为 : 





@ 参见 http://apijquery.com/jQuery.Callbacks/。 
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《foo 
bar 


这 证 明了 click 事件 的 处 理 器 因 trigger 方法 而 立即 被 激活 。 事 实 
上 ， 只 要 触发 了 jQuery 事件 ， 就 会 不 被 中 断 地 按 顺 序 执行 其 所 有 事 
件 处 理 器 。 





好 吧 , 我 们 要 明确 一 点 : 用 户 点 击 Submit ( 提交 ) 按钮 时 ， 这 确实 是 

个 异步 事件 。 点 击 事件 的 第 一 个 处 理 器 会 从 事件 队列 中 被 触发 。 然 
而 , 事件 处 理 器 本 身 无 法 知道 自己 是 从 事件 队列 中 还 是 从 应 用 代码 中 
运行 的 。 














如 果 事件 按 顺序 触发 了 过 多 的 处 理 器 , 就 会 有 阻塞 线程 日 导致 浏览 器 
不 响应 的 风险 。 更 糟糕 的 是 ， 如 果 事件 处 理 器 本 身 触发 了 事件 ,还 很 
容易 造成 无 限 循环 。 





$('input[type=submit]') 
.on('click', function() { 

$(this).trigger('click'); // 堆 栈 上 溢 ! 
}); 
回想 本 章 开 头 提 到 的 文字 处 理 程序 的 例子 。 用 户 按键 时 ,需要 发 生 很 
多 事情 ,其 中 某 些 事 还 需要 复杂 的 计算 。 全 部 做 完 这 些 事 之 后 再 返回 
事件 队列 ， 只 会 制造 出 响应 迟钝 的 应 用 。 




















这 个 问题 有 一 个 很 好 的 解决 方案 , 就 是 对 那些 无 需 即 刻 发 生 的 事情 维 
持 一 个 队列 ， 并 使 用 一 个 计时 函数 定时 运行 此 队列 中 的 下 一 项 任务 。 
首次 尝试 编码 的 结果 可 能 像 这样 : 

var tasks = []; 


setInterval (function() { 
Var nextTask; 
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if (nextTask = tasks.shift()) { 
nextTask(); 
3 
}, 0); 


( 请 参阅 4.4 节 ， 了 解 一 种 更 复杂 精妙 的 作业 排队 技术 。) 

PubSub 模式 简化 了 事件 的 命名 、 分 发 和 堆积 。 任 何 时 刻 ， 只 要 直觉 
上 认为 对 象 会 声明 发 生 什么 事情 ， 就 可 以 使 用 PubSub 这 种 很 棒 的 
模式 。 





2.2 事件 化 模型 


只 要 对 象 带 有 PubSub 接口 ， 就 可 以 称 之 为 事件 化 对 象 。 特 殊 情 况 出 
现在 用 于 存储 数据 的 对 象 因 内 容 变 化 而 发 布 事件 时 , 这 里 用 于 存储 数 
据 的 对 象 又 称 作 模型 。 模 型 就 是 MVC ( Model-View-Controller, 模型 - 
视图 -控制 器 ) 中 的 那个 M。MVC 三 层 架 构 设 计 模 式 在 最 近 几 年 里 已 
经 成 为 JavaScript 编程 中 最 热点 的 主题 之 一 ,MVC 的 核心 理念 是 应 用 
程序 应 该 以 数据 为 中 心 ， 所 以 模型 发 生 的 事件 会 影响 到 DOM ( 即 
MVC 中 的 视图 ) 和 服务 器 (通过 MVC 中 的 控制 器 而 产生 影响 )。 














我 们 先 来 看 看 人 气 爆 棚 的 Backbone.js 框架 ?。 可 以 像 这 样 创建 一 个 新 
的 Model (模型 ) 对 象 








style = new Backbone.Model( 
{font: 'Georgia'} 
); 


model 作为 参数 时 只 是 代表 了 那个 简单 的 可 以 传递 的 JSON 对 象 。 





人 参见 http://documentcloud.github.com/backbone/。 


UI 
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style.toJSON() // {"font": "Georgia"} 
但 不 同 于 普通 对 象 的 是 ， 这 个 model 对 象 会 在 发 生变 化 时 发 布 通知 。 


style.on('change:font', function(model, font) { 
alert('Thank you for choosing ' + font + '/!'); 
}); 


老式 的 JavaScript 依靠 输入 事件 的 处 理 需 直接 改变 DOM。 新 式 的 
JavaScript 先 改 变 模型 ， 接 着 由 模型 触发 事件 而 导致 DOM 的 更 新 。 在 
几乎 所 有 的 应 用 程序 中 ， 这 种 关注 层面 的 分 离 都 会 带 来 更 优雅、 更 直 
观 的 代码 。 

















2.2.1 模型 事件 的 传播 


作为 最 简 形 式 , MVC 三 层 架 构 只 包括 相互 联系 的 模型 和 视图 :“ 如 果 
模型 是 这 样 变化 的 ， 那么 DOM 就 要 那样 变化 。” 不 过 ，MVC 三 层 染 
构 最 大 的 利好 出 现在 change (变化 ) 事件 冒 泡 上 湖 数 据 树 的 时 候 。 
不 用 再 去 订阅 数据 树 每 片 叶 子 上 发 生 的 事件 , 而 只 需 订 阅 数据 树 根 和 
极 处 发 生 的 事件 即 可 。 








事件 化 模型 的 set/get 方 法 
正如 我 们 知道 的 ，JavaScript 确 实 没 有 一 种 每 当 对 象 变 化 时 就 触发 
事件 的 机 制 。 因 此 请 记 住 ， 事 件 化 模型 要 想 工作 的 话 ， 必 须要 使 
用 一 些 像 Backbone.js 之 set/get 这 样 的 方法 。 


style.set({font: 'Palatino'}); // 和 触发 器 警报 ! 
style.get('font'); // 结果 为 "Palatino" 
style.font = 'Comic Sans'; // 未 触发 任何 事件 
style.font; // 结果 为 "Comic Sans" 


style.get('font'); // 结果 仍 为 "Palatino" 
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将 来 也 许 无 需 如 此 ， 前 提 是 名 为 0bject.observe 的 ECMAScript 
提案 已 经 获得 广泛 接纳 。” 





a. 参见 https://plus.google.com/111386188573471152118/posts/6peb6yffyWG。 


为 此 ，Backbone 的 Model 对 象 常常 组 织 成 Backbone 集合 的 形式 ， 其 
本 质 是 事件 化 数组 。 我 们 可 以 监听 什么 时 候 对 这 些 数组 增 减 了 Model 
对 象 。Backbone 集合 可 以 自动 传播 其 内 列 Model 对 象 所 发 生 的 事件 。 


举 个 例子 , 假设 有 一 个 spriteCollection (精灵 集合 ) 集合 对 象 包 
含 了 上 百 个 Model 对象， 这 些 Model 对 象 代表 了 要 画 在 canvas ( 画 
布 ) 元 素 上 的 一 些 东西 。 每 当 任意 一 个 精灵 发 生变 化 ,都 需要 重新 绘 
制 画布 。 我 们 不 用 逐个 在 那些 精灵 上 附加 redraw ( 重 绘 ) 函数 作为 
change 事件 的 处 理 器 ， 相 反 ， 只 要 写 这 样 一 行 代码 : 














spriteCollection.on('change', redraw); 


注意 , 集合 事件 的 这 种 自动 传播 只 能 下 传 一 层 。Backbone 没有 藤 套 式 
集合 这 样 的 概念 。 不 过 ,我们 可 以 自行 用 Backbone 的 trigger 方法 
来 实现 骸 套 式 集合 的 多 层 传播 。 有 了 多 层 传播 机 制 之 后 ,任意 的 
Backbone 对 象 都 可 以 触发 任意 的 事件 。 








2.2.2 ”事件 循环 与 和 能 套 式 变化 

从 一 个 对 象 向 另 一 个 对 象 传播 事件 的 过 程 提 出 了 一 些 需要 关注 的 问 
题 。 如 果 每 次 有 个 对 象 上 的 事件 引发 了 一 系列 事件 并 最 终 对 这 个 对 象 
本 身 触 发 了 相同 的 事件 , 则 结果 就 是 事件 循环 。 如 果 这 种 事件 循环 还 
是 同步 的 , 那 就 造成 了 堆栈 上 浇 ， 就 像 我 们 在 2.1.3 方 中 看 到 的 一 样 。 


然而 在 很 多 时 候 , 变化 事件 的 循环 恰恰 是 我 们 想 要 的 。 最 常见 的 情况 
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就 是 双向 绑 定 一 一 两 个 模型 的 取 值 会 彼此 关联 ,假设 我 们 想 保 证 x 始 
终 等 于 2 * y。 

var x = new Backbone.Model ({value: 0}); 

var y = new Backbone.Model({value: 0}); 


x.on('change:value', function(x, xVal) {y.set({value: xVal / 2}); }); 
y.on('change:value', function(y, yVal) { x.set({value: 2 * yVal}); }); 


你 可 能 觉得 当 x 或 y 的 取 值 变化 时 , 这 段 代 码 会 导致 无 限 循环 。 但 实 
际 上 它 相 当 安 全 ， 这 要 感谢 Backbone 中 的 两 道 保险 。 


口 当 新 值 等 于 旧 值 时 ，set 方法 不 会 导致 触发 change 事件 。 
口 模型 正 处 于 自身 的 change 事件 期 间 时 ,不 会 再 触发 change 事件 。 











第 二 道 保险 代表 了 一 种 自 保 哲 学 。 假 设 模型 的 一 个 变化 导致 同一 个 
模型 又 一 次 变化 。 由 于 第 二 次 变化 被 “ 藤 套 ”在 第 一 次 变化 内 部 ， 所 
以 这 次 变化 的 发 生 悄 无 声息 。 外 面 的 观察 者 没有 机 会 回应 这 种 静默 的 


变化 。 














很 明显 ， 在 Backbone 中 维持 双向 数据 绑 定 是 一 个 挑战 。 而 允 一 个 重 
要 的 MVC 框架， 即 Emberjs， 采 用 了 一 种 完全 不 同 的 方式 : 双向 绑 
定 必须 作 显 式 声明 。 一 个 值 发 生变 化 时 , 男 一 个 值 会 通过 延 时 事件 作 
异步 更 新 。 于 是 ,在 触发 这 个 异步 更 新 事件 之 前 ， 应 用 程序 的 数据 将 
一 直 处 于 不 一 致 的 状态 。 














多 个 事件 化 模型 之 间 的 数据 绑 定 问题 不 存在 简单 的 解决 方案 。 在 
Backbone 中 ,有 一 种 审慎 绕 过 这 个 问题 的 途径 就 是 silent 标志 。 如 
果 在 set 方法 中 添加 了 {silent:true} 选 项 , 则 不 会 触发 change 事 
件 。 因此， 如 果 多 个 彼此 纠结 的 模型 需要 同时 进行 更 新 , 一 个 很 好 的 
解决 方法 就 是 悄 无 声息 地 设置 它们 的 值 。 然后 ， 当 这 些 模型 的 状态 已 
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经 一 致 时 ， 才 调用 它们 的 change 方法 以 触发 对 应 的 事件 。 


事件 化 模型 为 我 们 带 来 了 一 种 将 应 用 状态 变化 转换 为 事件 的 直观 方 
式 。Backbone 及 其 他 MVC 框架 做 的 每 件 事 都 跟 这 些 模型 有 关 ， 这 些 
模型 的 状态 变化 会 触发 DOM 和 服务 器 进行 更 新 。 要 想 掌 探 客户 端 
JavaScript 应 用 程序 与 日 俱 增 的 复杂 度 ， 运 用 事件 化 模型 存储 互 斥 数 
据 是 伟大 长 征 的 第 一 步 。 




















2.3 jQuery 自 定 义 事件 


自 定 义 事件 是 jQuery 被 低估 的 特性 之 一 ， 它 简化 了 强大 分 布 式 事件 
系统 向 任何 Web 应 用 程序 的 移植 ， 而 且 无 需 额外 的 库 。 在 jQuery 中 ， 
可 以 使 用 trigger 方法 基于 任意 DOM 元 素 触发 任何 想 要 的 事件 。 








$('#tabby, #socks').on('meow', function() { 
console.log(this.id + ' meowed'); 

3 
$('#tabby').trigger('meow'); // "tabby meowed" 
$('#socks').trigger('meow'); // "socks meowed" 


如 果 以 前 用 过 DOM 事件 ， 则 肯定 熟悉 冒 泡 技术 。 只 要 某 个 DOM 元 
素 触 发 了 某 个 事件 ( 壁 如 'click' 事 件 )， 其 父 元 素 就 会 接着 触发 这 
个 事件 ,接着 是 父 元素 的 父 元 素 ， 以 此 类 推 ， 一直 上溯 到 根 元 素 ( 即 
document )， 除 非 在 这 条 冒 泡 之 路 的 某 个 地 方 调用 了 事件 的 
stopPropagation 方法 。( 如 果 事 件 处 理 器 返回 fatse， 则 jQuery 
会 将 我 们 自动 调用 stopPropagation 方法 。) 但 你 是 否 也 知道 jQuery 
自 定义 事件 的 冒 泡 技术 呢 ?” 举 个 例子 ,假设 有 个 名 称 为 “soda” 的 span 
元 素 山 套 在 名 称 为 “bottle” 的 div 元 素 中 ， 代 码 如 下 。 
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$('#soda, #bottle').on('fizz', function() { 
console.log(this.id + ' emitted fizz'); 


}); 
$('#so0da').trigger('fizz'); 


得 到 的 输出 如 下 : 


《soda emitted fizz 
bottle emitted fizz 


这 种 冒 泡 方 式 并 非 始 终 受 人 欢迎 ， 从 下 面 的 tooltip (工具 提示 条 ) 示 
例 就 能 看 到 这 一 点 。 幸 运 的 是 ，jQuery 同样 提供 了 非 冒 泡 式 的 
triggerHandler 方法 。 


示例 : 工具 提示 条 


事件 直观 映射 至 页 面 元 素 之 后 , jQuery 就 成 为 分 发 这 些 事件 的 一 种 理 
想 方 式 。 举 个 例子 ,假设 正在 编写 一 个 关于 工具 提示 条 的 库 ， 并 和 多 
望 任 一 时 刻 只 能 看 到 一 个 工具 提示 条 。 我 们 可 能 会 简单 地 写 下 这 行 
代码 : 

















$('.tooltip').removel(); 


并 将 它 添加 到 那个 负责 新 添 工具 提示 条 的 函数 的 开头 ,但 后 来 我 们 又 
想 独 立 出 某 些 容器 ( 壁 如 ， 当 侧 边 栏 显示 新 的 工具 提示 条 时 ， 其 他 地 
方 的 工具 提示 条 不 受 影响 )， 该 怎么 办 ? 如 果 反 过 来 ， 又 该 怎么 办 ? 
编写 一 个 选择 器 来 选中 “那些 类 别 为 tooltip 日 不 是 sidebar 后 代 
的 DOM 元 素 "， 这 显然 很 复杂 ， 而 且 会 非常 没有 效率 。 如 果 人 允许 独 
立 容器 作 任 意 深度 的 组 套 ， 这 个 问题 的 难度 还 会 呈 指 数 级 增长 。 























I 


不 过 ， 利 用 事件 逻辑 而 不 是 选择 需 逻 辑 来 实现 这 一 行为 则 会 很 容易 。 
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// $container could be $('#sidebar') or $(document) 
$container.triggerHandler('newTooltip'); 
$container.one('newTooltip', function() { 
$tooltip.remove(); 

}); 


(请 注意 这 里 使 用 了 jQuery 的 one 来 代替 on。 这 两 者 的 区 别 在 于 ， 
one 在 触发 处 理 器 之 后 会 自动 将 其 删除 。) 








有 了 这 两 行 代码 之 后 , 所 有 的 工具 提示 条 都 会 监听 自己 的 容器 , 并 且 
每 当 容 器 获得 新 工具 提示 条 时 就 移 除 自 己 。 这 种 优美 、 直 接 、 有 效 的 
方式 拯救 了 我 们 , 让 我 们 无 需 存 储 任何 状态 ,也 不 用 鼓 弄 那些 复杂 的 
选择 器 。( 复杂 选择 器 会 让 那些 旧式 浏览 需 慢 得 像 乌 龟 爬 一 一 在 不 遍 
历 整个 文档 的 情况 下 ，IE7 及 更 早 版 本 甚至 都 无 法 选中 类 别 为 
tooltip 的 所 有 DOM 元 素 ! ) 








请 注意 , 实际 上 在 这 个 案例 中 事件 冒 泡 技术 会 破坏 我 们 的 意图 : 希望 
在 侧 边栏 新 建 一 个 工具 提示 条 时 ， 只 有 那些 监听 侧 边栏 之 
'newTooltip' 事 件 的 工具 提示 条 消失 不 见 , 而 那些 监听 外 围 document 
元 素 的 工具 提示 条 不 受 影响 。 请 始终 认真 思考 这 个 问题 : trigger 或 
triggerHandter， 到 底 哪 一 个 才 是 完成 该 任务 的 合适 工具 ? 








jQuery 自 定义 事件 是 PubSub 模式 的 性 道 产 物 ， 因 为 这 里 由 可 选择 的 
DOM 元 素 而 不 是 脚本 中 的 对 象 来 触发 事件 。 事 件 化 模型 更 像 是 一 种 
直观 表达 状态 相关 事件 的 方式 ， 而 jQuery 的 自 定义 事件 允许 直接 通 
过 DOM 来 表达 DOM 相关 的 事件 ， 不必 再 把 DOM 变化 的 状态 复制 
到 应 用 程序 的 其 他 地 方 。 请 大方 地 取 用 这 些 特性 , 但 要 尽量 避免 依赖 
应 用 程序 的 标记 语言 结构 一 一 你 肯定 不 希望 下 次 修改 设计 的 时 候 破 
坏 自己 的 脚本 。 




















2.4 小 结 


在 本 章 中 ,我 们 学 到 了 PubSub 如 何 作 为 最 基本 的 JavaScript 设计 模式 
之 一 实现 了 分 布 式 事件 。 如 果 没 有 订阅 那些 行将 发 布 的 事件 , PubSub 
将 是 完全 隐形 的 。 正 确 运 用 PubSub 模式 的 关键 是 判定 由 哪些 实体 分 
发 事件 。 


我 们 已 经 看 到 ,任何 对 象 只 要 简单 地 继承 诸如 Node 之 EventEmitter 
这 样 的 原型 ， 就 可 以 用 作 PubSub 实体 。 当 对 象 关联 着 一 组 异步 任务 
或 一 系列 VO 事件 时 ， 把 它 变 成 事件 化 对 象 会 是 个 不 错 的 想法 。 


有 一 类 特殊 的 事件 化 对 象 是 MVC 库 (如 Backbone.js ) 中 的 模型 。 这 
些 模 型 既 包 含 着 应 用 程序 的 状态 数据 ， 又 能 声明 自己 发 生 的 变化 。 
change 事件 可 以 触发 应 用 程序 的 逻辑 ， 引 起 DOM 的 更 新 ， 并 导致 
服务 器 的 同步 。 所 有 这 些 都 是 自然 而 然 发 生 的 , 这 也 解释 了 Backbone 
为 什么 会 成 为 火爆 异常 的 JavaScript 库 之 一 。 




















我 们 还 看 到 ，jQuery 不 仅 能 很 好 地 响应 浏览 器 提供 的 DOM 事 件 ， 而 
且 还 非常 适用 于 那些 与 DOM 元 素 变化 有 关 的 分 布 式 事件 。 事 件 化 的 
对 象 与 DOM 元 素 的 事件 可 以 彼此 完美 互补 ， 这 有 助 于 保持 应 用 状态 
数据 与 应 用 视图 相对 于 彼此 的 封装 状态 。 





所 有 这 些 都 是 活生生 的 PubSub 实例 。 不 过 , 尽管 PubSub 模式 如 此 多 
才 多 艺 ， 但 它 不 是 适用 于 所 有 任务 的 万 能 工具 。PubSub 模式 尤其 不 
适用 于 一 次 性 事件 , 一 次 性 事件 要 求 对 异步 函数 执行 的 一 次 性 任务 的 
两 种 结果 ( 完成 任务 或 任务 失败 ) 做 不 同 的 处 理 。( Ajax 请 求 就 是 常 
见 的 一 次 性 事件 实例 。) 用 于 解决 一 次 性 事件 问题 的 工具 叫做 
Promise， 这 正 是 下 一 章 的 主题 。 























A 2 


儿 3 诗 


Promise 对 象 和 Deferred 对 人 象 





2010 年 ， 我 和 我 那 能 者 多 劳 的 Ajax 同事 有 过 这 样 一 次 对 话 。 
我 : 嗨 ， 您 能 玫 我 从 这 个 URL 抓 取 一 些 数据 回来 吗 ? 
Ajax 大 拿 : 我 这 就 去 搞定 它 ! 不 过 你 要 给 我 一 个 success 回调 ， 
好 让 我 搞定 后 就 通知 你 。 
我 : 好 ， 给 您 。 十 分 感谢 。 
Ajax 大 拿 : 哦 ， 对 了 ， 你 还 要 给 我 一 个 error 回调 。 你 知道 啦 ， 
以 防 万 一 嘛 ! 
我 : 说 得 不 错 。 还 要 其 他 东西 吗 ? 
ie : 嘿 , 我 发 现 你 给 的 那 两 个 回调 之 间 有 一 些 代码 重复 呀 1 


你 可 以 把 那些 重复 的 代码 移 到 第 三 个 回调 里 面 ， 就 叫做 always 


回调 好 了 。 
我 : (不 耐烦 ) 好 吧 好 吧 ， 我 去 把 它们 重 构 一 下 。 另 外 ， 给 您 提 点 
意见 呀 ,您 干 嘛 不 先 去 干 活 儿 呢 ? 我 稍 后 再 给 您 那些 回调 不 行 吗 ? 


Ajax 大 拿 : (大 起) 那 我 变 成 什么 了 ? EventEmitter 对 象 吗 ? 
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地 好 ，jQuery 1.5 改 变 了 Ajax 大 拿 那 种 “马上 就 要 ”的 态度 。 我 们 知 
道 和 喜欢 的 所 有 Ajax 函数 ($.ajax、$,get 及 $.post ) 现在 都 会 返 
回 Promise ( 承诺 ) 对 象 。Promise 对 象 代表 一 项 有 两 种 可 能 结果 (成 
功 或 失败 ) 的 任务 , 它 还 持 有 多 个 回调 ， 出 现 不 同 结 果 时 会 分 别 触 发 
相应 的 回调 。 举 个 例子 ，jQuery 1.4 中 的 代码 必须 写成 这 样 : 





Promises/get-1.4.js 
$.get('/mydata', { 
success: onSuccess, 
failure: onFailure, 
always: onAlways 
}); 


而 到 了 jQuery 1.5+， 可 以 写成 这 样 : 


Promises/get-1.5.js 

var promise = $.get('/mydata'); 
promise.done(on9uccess ) ; 
promise.fail(onFailure); 
promise.always (onAlways); 


大 家 可 能 会 奇怪 :这 种 变化 能 有 什么 好 处 呢 ? 为 什么 非得 在 触发 Ajax 
调用 之 后 再 附加 回调 呢 ? 一 言 以 蔽 之 : 封装 。 如 果 Ajax 调用 要 实现 
很 多 效果 ( 既 要 触发 动画 ， 又 要 插入 HIML， 还 要 锁定 /解锁 用 户 输 
和 人 和， 等 等 )， 那 么 仅 由 负责 发 出 请 求 的 那 部 分 应 用 代码 来 处 理 所 有 这 
些 效果 ， 显 然 很 春 很 拙劣 。 








只 传递 Promise 对 象 就 会 优雅 得 多 。 传递 Promise 对 象 就 相当 于 声明 : 
“你 感 兴趣 的 某 某 事 就 要 发 生 了 。 想 知道 什么 时 候 完事 吗 ? 给 这 个 
Promise 对 象 一 个 回调 就 行 啦 ! ”Promise 对 象 也 和 EventEmitter 对 
象 一 样 ， 人 允许 向 同一 个 事件 绑 定 任意 多 的 处 理 器 (堆积 技术 )。 对 于 
多 个 Ajax 调用 分 享 某 个 功能 小 片段 ( 譬如 “ 正 加 载 ”动画 ) 的 情况 ， 
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堆积 技术 也 会 使 降低 代码 重复 度 容 易 很 多 。 


不 过 使 用 Promise 对 象 的 最 大 优势 仍然 在 于 ， 它 可 以 轻松 从 现 有 
Promise 对 象 派 生出 新 的 Promise 对 象 。 我 们 可 以 要 求 代表 着 并 行 任 
务 的 两 个 Promise 对 象 合并 成 一 个 Promise 对 象 ， 由 后 者 负责 通知 前 
面 那些 任务 都 已 完成 。 也 可 以 要 求 代表 着 任务 系列 中 首 任务 的 
Promise 对 和 象 派生 出 一 个 能 代表 任务 系列 中 末 任 务 的 Promise 对 象 ， 
这 样 后 者 就 能 知道 这 一 系列 任务 是 否 均 已 完成 。 竺 会 儿 我 们 就 会 看 
到 ，Promise 对 象 天 生 就 适合 用 来 进行 这 些 操作 。 











3.1 Promise 极 简 史 


Promise 对 象 曾 经 以 多 种 形式 存在 于 很 多 语言 中 。 这 个 词 最 先 由 C++ 
工程 师 用 在 Xanadu 项目 中 , Xanadu 项目 是 Web 应 用 项 目的 先驱 。 随 
后 Promise 被 用 在 EE 编程 语言 中 ,这 叉 激 发 了 Python 开发 人 员 的 灵感 ， 
将 它 实 现成 了 Twisted 框架 的 Deferred 对 象 。 














2007 年 , Promise 赶 上 了 JavaScript 大 潮 , 那 时 Dojo 框架 刚 从 Twisted 
框架 汲取 灵感 ， 新 增 了 一 个 叫做 dojo.Deferred 的 对 象 。 也 就 在 那 
个 时 候 ， 相 对 成 熟 的 Dojo 框架 与 初出 茅 庐 的 jQuery 框架 激烈 地 争夺 
着 人 气 和 名 望 。2009 年 ，Kris Zyp 有 感 于 dojo.Deferred 的 影响 力 
提出 了 CommonJS 之 Promises/A 规范 "。 同 年 ，Nodejs 首次 亮相 。 

Node 早期 的 几 个 版 本 在 其 非 阻 塞 式 API 中 用 到 了 Promise。 但 到 了 
2010 年 2 月 ，Ryan Dahl 决定 切换 至 当时 为 人 所 熟知 的 callback 
(err，result...) 格 式 ， 因 为 Promise 是 一 种 属于 “用 户 之 境 ” 的 























@ 参见 http://wiki.commonjs.org/wiki/Promises/A。 
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甚 高 层 构造 。 


Ryan Dahl 的 决定 为 那些 以 Node 为 竞争 目标 的 Promise 实现 腾 出 了 
舞台 ,其 中 就 有 著名 的 Kris Kowal 的 Q.js 和 AJONeal 的 Futures”。 
(在 一 般 性 用 法 中 ，Promise、Deferred 和 Future 这 三 个 词 大 体 可 算 
作 同 义 词 。 )Q.js 是 Promises/A 规范 的 一 种 相当 直观 的 实现 ,Futures 
是 一 种 更 广泛 的 工具 集 ， 结 合 了 很 多 在 其 他 库 ( 如 Async.js ) 中 才 
能 找到 的 工作 流 控 制 特性 。 




















不 过 ，Promise 今天 受到 如 此 多 关注 的 原因 当然 是 jQuery。jQuery 1.5 
在 2011 年 1 月 携 $.ajax 重量 级 重 写 之 势 ， 用 其 Promise 实现 震惊 了 
无 数 初 次 接触 Promise 对 象 的 开发 者 。 不 过 ， 其 他 的 开发 者 则 优 心 虱 
虱 ,因为 jQuery 1.5 对 Promises/A 规范 的 无 视 导 致 了 微妙 的 API 差 异 。 














除了 3.7 节 之 外 ， 本 章 其 余部 分 的 关注 点 都 是 jQuery 的 Promise 实 
现 。 此 外 还 会 讲述 jQuery 在 用 语 上 的 不 同 之 处 ,特别 是 两 点 ,一 是 
Deferred 与 Promise 之 间 的 区 别 〈 下 一 节 就 会 看 到 )， 二 是 resolve 
用 作 reject 的 反义词 。 


3.2 生成 Promise 对 象 


本 章 一 开始 就 展示 了 如 何 用 jQuery 1.5+ 中 的 Ajax 方法 ($.ajax、 
$.get 及 $.post ) 返回 Promise 对 象 。 但 要 想 真 正 理解 Promise， 我 
们 需要 自己 动手 生成 它 。 





小 水 


S 


参见 https://github.com/kriskowal/q。 
参见 https://github.com/coolaj86/futures。 
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假设 我 们 提示 用 户 应 敲 击 Y 键 或 N 键 。 为 此 要 做 的 第 一 件 事 就 是 生 
成 一 个 $.Deferred 实例 以 代表 用 户 做 出 的 决定 。 

var promptDeferred = new $.Deferred!(); 

promptDeferred.always (function(){ console.log('A choice was made: '); }); 


promptDeferred.done(function(){ console.log('Starting game...'); }); 
promptDeferred.fail(function(){ console.log('No game today.'); }); 


( 注 : always 关键 字 仅 适 用 于 jQuery 1.6+。) 


大 家 可 能 会 奇怪 : 为 什么 本 节 叫 做 “生成 Promise 对 象 " ， 却 要 生成 
一 个 Deferred (延迟 ) 实例 ?” 别 担心 ，Deferred 就 是 Promise! 更 准确 
地 说 ，Deferred 是 Promise 的 超 集 ， 它 比 Promise 多 了 一 项 关键 特性 : 
可 以 直接 触发 。 纯 Promise 实例 只 允许 添加 多 个 调用 ， 而 且 必 须 由 其 
他 什么 东西 来 触发 这 些 调用 。 








使 用 resolve ( 执行 ) 方 法 和 reject (拒绝 ) 方法 均 可 触发 Deferred 
对 象 。 


$('#playGame').focus().on('keypress', function(e) { 
var Y = 121, N = 110; 
if (e.keyCode === Y) { 
promptDeferred. resolve(); 
} else if (e.keyCode === N) { 
promptDeferred.reject(); 
} else { 
return false; // 这 里 的 Deferred 对 象 保持 着 挂 起 状态 
}; 
Es 


请 访问 http://jsfiddle.net/TrevorBurnham/PJ6Bf) 查 看 这 个 例子 的 运行 情 
况 。 加 载 页 面 ， 剖 击 了 键 。 控 制 台 会 这 样 说 : 
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《A choice was made : 
Starting game... 


大 家 看 懂 是 怎么 回 事 了 吗 ? 执行 了 Deferred ( 即 对 Deferred 对 象 调用 
了 resolve 方法 ) 之 后 , 即 运行 该 对 象 的 aways( 恒 常 ) 回 调和 done 





(已 完成 ) 回调 。( 会 按照 绑 定 回调 的 次 序 来 运行 回调 ,这 可 不 是 巧合 
哦 ! ) 
刷新 页 面 ， 敲 击 N 键 。 





《A choice was made: 
No game today. 


这 样 ， 拒 绝 了 Deferred( 即 对 Deferred 对 象 调用 了 reject 方法 ) 之 
后 ， 即 运行 该 对 象 的 atways 回调 和 fail (失败 ) 回调 。 注 意 ， 始 
终 会 按照 绑 定 回调 的 次 序 来 运行 回调 。 如 果 最 后 绑 定 的 是 always 回 
调 ， 则 控制 台 的 输出 行 顺序 会 反 过 来 。 





再 试 着 反复 敲 击 Y 键 和 键 。 第 一 次 做 出 选择 之 后 ， 就 再 也 没有 反 
应 了 ! 这 是 因为 Promise 只 能 执行 或 拒绝 一 次 ， 之 后 就 失效 了 。 我 们 
断言 ，Promise 对 象 会 一 直 保 持 挂 起 状态 ， 直 到 被 执行 或 拒绝 。 对 
Promise 对 象 调 用 state( 状态 ) 方 法 , 可 以 查看 其 状态 是 "pending"、 
"resolved"， 还 是 "rejected"。( 到 jQuery 1.7 才 添加 了 state 方 
法 ， 此 前 的 版 本 使 用 的 是 isResoLved 和 isRejected。) 














如 果 正 在 进行 的 一 次 性 异步 操作 的 结果 可 以 笼统 地 分 成 两 种 ( 如 成 功 
/失败 ,或 接受 /拒绝 ), 则 生成 Deferred 对 象 就 能 直观 地 表达 这 次 任务 。 





3.2.1 生成 纯 Promise 对 象 
我 们 刚刚 了 解 到 Deferred 对 象 也 是 Promise 对 象 ， 那 么 ， 如 何 得 到 一 
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个 不 是 Deferred 对 象 的 Promise 对 象 呢 ? 很 简单 ， 对 Deferred 对 象 调 
用 promise 方法 即 可 。 


两 种 说 法 ， 一 个 意思 

大 家 可 能 已 经 注意 到 了 ， 在 执行 或 拒绝 Promise 的 时 候 ， 我 一 直 说 
的 是 “触发 ”Promise 对 象 ; 已 执行 或 已 拒绝 Promise 则 称 Promise 
对 象 “已 触发 "。 这 种 说 法 并 不 标准 ,不 过 本 章 仍 会 沿用 。 遗憾 的 
是 ,jQuery 除了 抽 劣 地 念 归 “ 非 挂 起 ”之 外 ， 并 没有 一 种 简洁 明 
了 的 说 法 来 指 代 那 些 已 执行 或 已 拒绝 的 Promise 对 象 。 

CommonJS 的 Promises/A 规 范 及 其 实现 中 使 用 了 一 种 更 合理 的 说 
法 : Promise 对 象 已 履行 〈( 关键 字 为 fulfill ) 或 已 拒绝 ， 这 两 种 
情况 都 称 Promise 已 执行 。3.7 节 会 对 此 作 进 一 步 阐 述 


var promptPromise = promptDeferred.promise(); 


promptPromise 只 是 promptDeferred 对 象 的 一 个 没有 
resolve/reject 方法 的 副本 。 我 们 把 回调 绑 定 至 Deferred 或 其 下 辖 
的 Promise 并 无 不 同 ， 因 为 这 两 个 对 象 本 质 上 分 享 着 同样 的 回调 。 它 
们 也 分 享 着 同样 的 state( 返回 的 状态 值 为 "pending"、"resolved" 
或 "rejected" ), 这 意味 着 , 对 同一 个 Deferred 、 Promise 
对 象 是 毫 无 意义 的 。 事实 上 ，jQuery 给 出 的 只 不 过 是 同一 个 对 象 。 





var promisel = promptDeferred.promise(); 
var promise2 = promptDeferred.promise(); 
console.log(promisel === promise2); // true 


而 且 , 对 一 个 纯 Promise 对 象 再 调用 promise 方法 , 产生 的 只 不 过 是 
一 个 指向 相同 对 象 的 引用 。 





console.log(promisel === promisel.promise()); // true 
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使 用 promise 方法 的 唯一 理由 就 是 “封装 ”。 如 果 传 递 promptPromise 
对 象 ， 但 保留 promptDeferred 对 象 为 已 所 用 ， 则 可 以 肯定 的 是 ， 
除非 是 你 自己 想 触发 那些 回调 ， 否 则 任何 回调 都 不 会 被 触发 。 


在 此 重申 一 点 : 每 个 Deferred 对 象 都 含有 一 个 Promise 对 象 ， 而 每 个 
Promise 对 象 都 代表 着 一 个 Deferred 对 象 。 有 了 Deferred 对 象 ， 就 
可 以 控制 其 状态 ， 而 有 了 纯 Promise 对 象 ， 只 能 读 取 其 状态 及 附加 
回调 。 











3.2.2 jQuery API 中 的 Promise 对 象 


本 章 开头 列举 了 jQuery 的 Ajax 函数 ($.ajax、$.get 及 $.post ) 
可 返回 的 几 个 Promise 对 象 。Ajax 是 演示 Promise 的 绝 佳 用 例 : 每 次 
对 远程 服务 器 的 调用 都 或 成 功 或 失败 , 而 我 们 和 希望 以 不 同 的 方式 来 处 
理 这 两 种 情况 。 不 过 ，Promise 也 同样 适用 于 本 地 的 一 些 异 步 操作 ， 
譬如 动画 。 








在 jQuery 中 ， 任 何 动画 方法 都 可 以 接受 传人 的 回调 ， 以 便 在 完成 动 
画 时 发 出 通知 。 


$('.error').fadeIn(afterErrorShown); 


在 jQuery 1.6+ 中 ， 可 以 转 而 要 求 jQuery 对 象 生成 Promise， 后 者 代表 
了 这 个 对 象 已 附加 动画 的 完成 情况 , 即 是 否 完成 了 目前 正 处 于 挂 起 状 
态 的 动画 。 


var errorPromise = $('.error').fadeIn().promise!(); 
errorPromise.done(afterErrorShown); 


对 同一 个 jQuery 对 象 附加 的 多 个 动画 会 排 人 队列 按 顺 序 运行 。 仅 当 
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调用 promise 方法 之 时 已 人 列 的 全 部 动画 均 已 执行 之 后 ， 相 应 的 
Promise 对 象 才 会 执行 。 因 此 ， 这 会 产生 两 个 不 同 的 、 按 顺序 执行 的 
Promise 对 象 (或 者 根本 就 不 执行 ， 若 先 调用 stop 方法 的 话 )。 

var $fLash = $('.flash'); 


var showPromise $flash.show().promise(); 
var hidePromise $flash.hide().promise(); 


相当 简单 ， 对 不 对 ? 在 jQuery 1.6 及 jQuery 1.7 中 ，jQuery 对 象 的 
promise 方法 只 是 一 种 权宜 之 计 。 如 果 使 用 Deferred 对 象 的 resolve 
方法 作为 动画 的 回调 , 即 可 自行 轻松 生成 一 个 行为 完全 相同 的 动画 版 
Promise 对 象 。 





var slideUpDeferred = new $.Deferred() ; 
$('.menu').slideUp(slideUpDeferred.resolve); 
var slideUpPromise = slideUpDeferred.promise(); 


在 本 书 付 梓 之 前 刚刚 发 布 的 jQuery 1.8 中 ， 动 画 版 Promise 已 变 成 更 
加 强大 的 对 象 。 动 画 版 Promise 附加 了 额外 的 信息 ， 其 中 包括 动画 运 
行 过 程 中 的 计算 值 props (这 对 调试 非常 有 价值 )。 此 外 ， 对 动画 版 
Promise 对 象 ， 还 可 以 获得 进度 通知 〈 请 参阅 3.4 节 )， 以 及 即时 调整 
动画 。 有 关 这 些 新 特性 的 文档 草稿 可 见于 https://gist.github.com/ 
$54829d408993526fe475。 




















jQuery 1.8 又 向 jQuery 大 家 庭 中 新 添 了 一 种 Promise 资源 : $ .ready. 
promise() 也 能 生成 一 个 Promise 对 象 ， 并 且 当 文档 就 绪 时 即 执行 该 
对 象 。 这 意味 着 以 下 3 行 代码 现在 是 等 效 的 。 

$(onReady); 


$(document).ready (onReady); 
$.ready.promise().done(onReady); 


52 | 第 3 章 Promise 对 象 和 Deferred 对 象 


> 


本 节 介 绍 了 如 何 获 得 jQuery 中 的 Promise 对 象 : 或 者 生成 一 人 
$.Deferred 实例 ( 这 会 带 来 一 个 可 自行 控制 的 Promise )， 或 者 进行 
一 次 可 返回 Promise 对 象 的 API 调 用 。 以 下 几 节 将 介绍 我 们 能 对 这 些 
Promise 对 象 做 些 什么 。 








3.3 向 回调 传递 数据 








Promise 对 象 可 以 向 其 回调 提供 额外 的 信息 。 举 个 例子 ， 下 面 这 两 个 
Ajax 代码 片段 是 等 效 的 。 





// 直接 使 用 回调 
$.get(url, successCallback); 


// 将 回调 绑 定 至 Promise 对 象 
var fetchingData = $.get(url); 
fetchingData.done(successCallback); 


执行 或 拒绝 Deferred 对 象 时 ， 提 供 的 任何 参数 都 会 转发 至 相应 的 
回调 。 

var aDreamDeferred = new $.Deferred!(); 
aDreamDeferred.done(function(subject) { 


console.log('T had the most wonderful dream about', subject); 


}); 
aDreamDeferred.resolve('the JS event model'); 


《I had the most wonderful dream about the JS event model 
还 有 一 些 特殊 的 方法 能 实现 在 特定 上 下 文中 运行 回调 ( 即将 this 设 
置 为 特定 的 值 ); resolveWith 和 rejectwith。 此 时 只 和 需 传 递 上 下 
文 环境 作为 第 一 个 参数 ， 同 时 以 数组 的 形式 传递 所 有 其 他 参数 。 
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var slashdotter = { 

comment: function(editor){ 

console.log('Obviously', editor, 'is the best text editor.'); 

}; 
var grammarDeferred = new $.Deferred!(); 
grammarDeferred.done(function(verb, object) { 

this[verb] (object); 
}); 
grammarDeferred.resolveWith(slashdotter, ['comment', 'Emacs']); 


《Obviously Emacs is the best text editor. 
然而 ,将 参数 打包 成 数组 是 很 痛苦 的 。 所 以 还 有 一 个 小 窍门 : 不 再 使 
用 resolveWith/rejectwith， 而 是 直接 在 目标 上 下 文中 调用 
resolve/ reject 方法 ， 这 是 因为 resolve/reject 可 以 直接 将 其 上 
F 文 环境 传递 至 自己 所 触发 的 回调 。 因 此 ， 对 于 前 面 那个 例子 ,使 用 
以 下 代码 亦 可 得 到 同样 的 结 




















grammarDeferred.resolve.call(slashdotter, 'comment', "Emacs ' ) ; 


3.4 进度 通知 


Promise 对 象 是 你 希望 任务 结束 时 发 生 的 一 些 事 。 但 是 ， 你 没 听 说 过 
过 程 和 结果 同样 重要 吗 ? 难道 你 不 以 为 然 吗 ? 








幸好 ，jQuery 团队 意识 到 了 这 一 点 并 遵守 Promises/A 规范 ， 于 是 在 
jQuery 1.7 中 为 Promise 对 象 新 添 了 一 种 可 以 调用 无 数 次 的 回调 。 这 
个 回调 叫做 progress ( 进度 ),。 举 个 例子 , 假设 有 人 正在 奋力 达成 美 
国 全 国 小 说 写作 月 ( National Novel Writing Month， 简写 为 
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NaNoWriMo ) "项 目 设 定 的 日 均码 字 目 标 ， 而 我 们 希望 更 新 一 个 指示 
器 以 反映 他 距离 实现 这 个 目标 还 有 多 远 





var nanowrimoing = $.Deferred(); 

var wordGoal = 5000; 

nanowrimoing.progress(function(wordCount) { 
var percentComplete = Math.floor(wordCount / wordGoal * 100); 
$('#indicator').text(percentComplete + '% complete'); 

}); 

nanowrimoing.done(function(){ 
$('#indicator').text('Good job!'); 

}); 


Deferred 对 象 的 nanowrimoing 准备 就 绪 之 后 ,可 以 像 下 面 这 样 对 字 
数 的 变化 作出 响应 。 
$('#document').on('keypress', function(){ 

var wordCount = $(this).val().split(/\s+/).length; 

if (wordCount >= wordGoal) { 

nanowrimoing.resolve(); 

和 

nanowrimoing.notify(wordCount ) ; 
}); 
Deferred 对 象 的 notify (通知 ) 调用 会 调用 我 们 设 定 的 progress 
回调 。 就 像 resolve 和 reject 一 样 ，notify 也 能 接受 任意 参数 。 
请 注意 ， 一 旦 执行 了 nanowrimoing 对 象 ， 则 再 作 nanowrimoing . 
notify 调用 将 不 会 有 任何 反应 , 这 就 像 任何 额外 的 resolve 调用 及 
reject 调用 也 会 被 直接 无 视 一 样 。 








简单 总 结 一 下 ，Promise 对 象 接受 3 种 回调 形式 : done 、fail 和 
progress。 执行 Promise 对 象 时 , 运行 的 是 done 回调 ; 拒绝 Promise 





人 参见 http://www.nanowrimo.org/。 


3.5 ”Promise 对 象 的 合并 | 55 





对 象 时 ， 运 行 的 是 fail 回调 ;对 处 于 挂 起 状态 的 Deferred 对 象 调用 


notify 时 ， 运 行 的 是 progress 回调 。 


3.5 Promise 对 象 的 合并 


进度 通知 的 存在 并 没有 改变 每 个 Promise 对 象 的 最 终 状 态 为 已 执行 或 
已 拒绝 这 一 事实 。( 否则 ，Promise 对 象 将 永远 保持 挂 起 状态 。) 但 为 
什么 要 这 样 呢 ? 为 什么 不 让 Promise 对 象 随 时 变化 成 任意 的 状态 ， 而 
i 只 有 这 两 种 状态 呢 ? 























己 











这 样 设计 Promise， 其 主要 原因 是 程序 员 一 直 都 在 跟 二 进 制 打交道 。 
我 们 这 些 码 农 非常 清楚 如 何 把 1 和 0 揉 捏 起 来 建成 令 人 贞 目 的 逻辑 之 
塔 。Promise 如 此 强大 的 一 个 主要 原因 是 ， 它 允许 我 们 把 任务 当成 布 
尔 量 来 处 理 。 
































Promise 对 象 的 逻辑 合并 技术 有 一 个 最 常见 的 用 例 : 判定 一 组 异步 任 
务 何 时 完成 。 假 设 我们 正在 播放 一 段 演示 视频 , 同时 又 在 加 载 服务 器 
上 的 一 个 游戏 。 我 们 希望 这 两 件 事 一 旦 结束 ( 对 次 序 没有 要 求 )， 就 
马上 启动 游戏 。 








口 演示 视频 已 经 播放 完毕 。 
口 游戏 已 经 加 载 完 毕 。 





这 两 个 进程 各 用 一 个 Promise 对 象 来 表示 ， 我 们 的 任务 就 是 在 这 两 个 
Promise 均 已 执行 时 启动 游戏 。 我 们 如 何 做 到 这 一 点 呢 ? 


下 面 隆重 介 绍 jQuery 的 when 方法 ! 
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var gameReadying = $.when(tutorialPromise, gameLoadedPromise); 
gameReadying.done(startGame); 


when 相当 于 Promise 执行 情况 的 逻辑 与 运算 符 (AND ), 一 旦 给 定 的 
所 有 Promise 均 已 执行 ， 就 立即 执行 when 方法 产生 的 Promise 对 象 ; 
或 者 ,一 旦 给 定 的 任意 一 个 Promise 被 拒绝 ， 就 立即 拒绝 when 产生 


的 Promise。 


when 方法 的 绝 佳 用 例 是 合并 多 重 Ajax 调用 。 假设 需要 马上 进行 两 次 
post 调用 ,而 且 要 在 这 两 次 调用 都 成 功 时 收 到 通知 ， 这 时 就 无 需 再 
为 每 次 调用 请 求 分 别 定义 一 个 回调 。 

$.when($.post('/1', datal), $.post('/2', data2)) 

.then(onPosted, onFailure); 

调用 成 功 时 ，when 可 以 访问 下 辖 的 各 个 成 员 Promise 对 象 的 回调 参 
数 ， 不 过 这 么 做 很 复杂 。 这 些 回 调 参 数 会 当 作 参 数列 表 进 行 传递 , 传 
递 的 次 序 和 成 员 Promise 对 象 传递 给 when 方法 时 一 样 。 如 果 某 个 成 
员 Promise 对 象 提供 多 个 回调 参数 ， 则 这 些 参数 会 先 转换 成 数组 。 


因此 ， 要 想 根据 赋予 $.when 方法 的 所 有 成 员 Promise 对 象 获 得 全 部 
回调 参数 ,可 能 会 写 出 像 下 面 这 样 的 代码 ( 但 笔者 并 不 推荐 这 么 做 )。 





$.when(promisel, promise2) 
.done(function(promiselArgs, promise2Args) { 
J 

}); 
在 这 个 例子 中 , 如 果 执 行 promisel 时 用 到 了 一 个 参数 ' compLete ' ， 
执行 promise2 时 用 到 了 3 个 参数 (1、2、3 ), 则 promiselArgs 就 
是 字符 串 'complete' ，promise2Args 就 是 数组 [1,2,3]。 
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虽然 有 可 能 ， 但 如 果 不 是 绝对 必要 ， 我 们 不 应 该 自行 解析 when 回调 
的 参数 ， 相 反应 该 直接 向 那些 传递 至 when 方法 的 成 员 Promise 对 象 
附加 回调 来 收集 相应 的 结 





var ServerData = {}; 

var gettingl = $.get('/1') 

.done(function(result) {serverData['1'] = result;}); 
var getting2 = $.get('/2') 

.done(function(result) {serverData['2'] = result;}); 
$.when(gettingl, getting2) 

.done(function() { 

// 获得 的 信息 现在 都 已 位 于 serverData…… 

}); 


函数 的 Promise 用 法 


$.when 及 其 他 能 取 用 Promise 对 象 的 jQuery 方法 均 支 持 传人 非 
Promise 对 象 作 为 参数 。 这 些 非 Promise 参数 会 被 当成 因 相 应 参数 位 
置 已 赋值 而 执行 的 Promise 对 象 来 处 理 。 例 如 








$.when('foo') 
会 生成 一 个 因 赋 值 ' foo ' 而 立即 执行 的 Promise 对 象 。 再 壁 如 


var promise = $.Deferred().resolve(l'manchu'); 
$.when('foo', promise) 


会 生成 一 个 因 赋 值 'foo' 和 'manchu' 而 立即 执行 的 Promise 对 象 。 
代码 


var promise = $.Deferred().resolve(1, 2, 3); 
$.when('test', promise) 


会 生成 一 个 因 赋 值 'test' 和 数组 [1,2,3] 而 立即 执行 的 Promise 对 
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象 。( 请 记 住 ,Deferred 对 象 传 递 多 个 参数 给 resolve 方法 时 ,$ .when 
会 把 这 些 参数 转换 成 一 个 数组 。) 


这 带 来 了 一 个 问题 : $.when 如 何 知道 参数 是 不 是 Promise 对 象 呢 ? 
答案 是 :jQuery 负责 检查 $.when 的 各 个 参数 是 否 带 有 promise 方 法 ， 
如 果 有 就 使 用 该 方法 返回 的 值 。Promise 对 象 的 promise 方法 会 直接 
返回 自身 。 














正如 3.2.2 节 所 述 ，jQuery 对 象 也 可 以 有 promise 方法 ， 这 意味 着 
$.when 方法 强行 将 那些 带 promise 方法 的 jQuery 对 象 转换 成 了 
jQuery 动画 版 Promise 对 象 。 因 此 ， 如 果 想 生成 一 个 在 抓 取 某 些 数据 
且 已 完成 #loading 动画 之 后 执行 的 Promise 对 象 ， 只 需 写 下 下 面 这 
样 的 代码 : 





var fetching = $.get('/myData'); 
$.when(fetching, $('#Lloading')); 


只 是 请 记 住 ， 必 须要 在 动画 开始 之 后 再 执行 $.when 生成 的 那个 
Promise 对 象 。 如 果 #Loading 的 动画 队列 为 空 ， 则 立即 执行 相应 的 
Promise 对 象 。 


3.6 ”管道 连接 未 来 


在 JavaScript 中 常常 无 法 便捷 地 执行 一 系列 异步 任务 ， 一 个 主要 原因 
是 无 法 在 第 一 个 任务 结束 之 前 就 向 第 二 个 任务 附加 处 理 器 。 举 个 例 
子 ， 假 设 我 们 要 从 一 个 URL 抓 取 数 据 ( GET )， 接 着 又 将 这 些 数 据 发 
送 给 另 一 个 URL (POST )。 
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var getPromise = $.get('/query'); 
getPromise.done(function(data) { 

var postPromise = $.post('/search', data); 
}); 
// 现在 我 们 想 给 postPromise 附加 处 理 器 …… 
看 到 这 里 的 问题 了 吗 ? 在 GET 操作 成 功 之 前 我 们 无 法 对 postPromise 
对 象 绑 定 回 调 ， 因 为 这 时 postPromise 对 象 还 不 存在 ! 除非 我 们 已 
经 得 到 因 $.get 调用 而 异步 抓 取 的 数据 , 否则 甚至 无 法 进行 那个 负责 
生成 postPromise 对 象 的 $.post 调用 ! 





这 正 是 jQuery 1.6 为 Promise 对 象 新 增 pipe( 管道 ) 方 法 的 原因 。pipe 
好 像 在 说 :“ 请 针对 这 个 Promise 对 象 给 我 一 个 回调 ， 我 会 归还 一 个 
Promise 对 象 以 表示 回调 运行 的 结果 。 





var getPromise = $.get('/query'); 
var postPromise = getPromise.pipe(function(data) { 
return $.post('/search', data); 
局 


看 起 来 就 像 黑 魔法 ， 对 吧 ? 下 面 是 详情 大 揭秘 : pipe 最 多 能 接受 3 
个 参数 ， 它 们 对 应 着 Promise 对 象 的 3 种 回调 类 型 : done、fail 和 
progress。 也 就 是 说 , 我 们 在 上 述 例子 中 只 提供 了 执行 getPromise 
应 运行 的 那个 回调 。 当 这 个 回调 返回 的 Promise 对 象 已 经 执行 /拒绝 
寸 ，pipe 方法 返回 的 那个 新 Promise 对 象 也 就 可 以 执行 /拒绝 。 


Es 








Ey 





从 效果 上 看 ，pipe 就 是 通 向 未 来 的 一 扇 窗户 ! 





我 们 也 可 以 通过 修改 pipe 回调 参数 来 “ 滤 清 ”Promise 对 象 。 如 果 
pipe 方法 的 回调 返回 值 不 是 Promise/Deferred 对 象 , 它 就 会 变 成 回调 
参数 。 举 例 来 说 ， 假 设 有 个 Promise 对 象 发 出 的 进度 通知 表示 成 0 与 
1 之 间 的 某 个 数 , 则 可 以 使 用 pipe 方法 生成 一 个 完全 相同 的 Promise 
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对 象 ， 但 它 发 出 的 进度 通知 却 转变 成 可 读 性 更 高 的 字符 串 。 


var promise2 = promisel.pipe(null, null, function(progress) { 
return Math.floor(progress * 100) + '% complete'; 
}); 


总 的 说 来 ，pipe 的 回调 可 以 做 以 下 两 件 事情 。 


口 如 果 pipe 回调 返回 的 是 Promise 对 象 , 则 pipe 生成 的 那个 Promise 
对 象 会 模仿 这 个 Promise 对 象 。 

口 如 果 pipe 回调 返回 的 是 非 Promise 对 象 ( 值 或 空白 )， 则 pipe 生 
成 的 那个 Promise 对 象 会 立即 因 该 赋值 而 执行 、 拒 绝 或 得 到 通知 ， 
有 具体 取决 于 调用 pipe 的 那个 初始 Promise 对 象 刚刚 发 生 了 什么 。 





pipe 判定 参数 是 否 为 Promise 对 象 的 方法 和 $ .when 完全 一 样 : 如 果 
pipe 的 参数 带 有 promise 方法 , 则 该 方法 的 返回 值 会 被 当 作 Promise 
对 象 以 代表 调用 pipe 的 那个 初始 Promise 对 象 。 再 重申 一 次 ， 





promise. promise() === promise。 
管道 级 联 技术 


pipe 方法 并 不 要 求 提供 所 有 的 可 能 回调 。 事 实 上 ， 我 们 通常 只 想 写 
成 这 样 : 


var pipedPromise = originalPromise.pipe(successCallback); 


var pipedPromise = originalPromise.pipe(null, failCallback); 


我 们 能 看 出 初始 Promise 对 象 ( 即 originaLPromise ) 在 成 功 /失败 之 
后 应 触发 的 回调 ( 第 一 种 情况 下 因 任务 成 功 而 触发 successCallback， 
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第 二 种 情况 下 因 任 务 失 败 而 触发 faiLCaLLback )， 所 以 管道 末尾 的 
Promise ( 即 pipedPromise ) 行为 取决 于 successCallback/ 
failCallback 的 返回 值 。 但是， 如 果 并 没有 在 pipe 方法 中 为 初始 
Promise 的 任务 结果 指定 回调 ， 又 该 怎么 办 呢 ? 


很 简单 ,管道 末尾 的 Promise 在 这 些 情况 下 直接 模仿 那个 初始 Promise 
对 象 。 我 们 可 以 这 样 说 : 初始 Promise 对 象 的 行为 一 直 级 联 到 管道 末 
尾 的 Promise 对 象 。 这 种 级 联 技术 非常 有 用 ， 因 为 它 让 我 们 不 费 吹 
灰 之 力 就 能 定义 异步 任务 的 分 化 逻辑 。 假设 有 这 样 一 个 分 成 3 步 走 的 























var stepl = $.post(' /stepI'，datal) ; 

var step2 = stepl.pipe(function() { 
return $.post('/step2', data2); 

}); 

var lastStep = step2.pipe(function() { 

return $.post('/step3', data3); 

}); 


这 里 的 LastStep 对 和 象 当日 仅 当 所 有 这 3 个 Ajax 调用 都 成 功 完 成 时 
才 执 行 ,其 中 任意 一 个 Ajax 调用 未 能 成 功 完 成 , LastStep 均 被 拒绝 。 
如 果 只 在 乎 整体 进程 ， 则 可 以 省 略 掉 前 面 的 变量 声明 。 








var posting = $.post('/step1', datal) 
.pipe(function() { 
return $.post('/step2', data2); 
}) 
.pipe(function() { 
return $.post('/step3', data3); 
}); 


也 可 以 让 后 面 的 pipe 藤 套 在 前 面 那 个 pipe 的 里 面 。 
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var posting = $.post('/stepl', datal) 
.pipe(function() { 
return $.post('/step2', data2) 
.pipe(function() { 
return $.post('/step3', data3); 
}); 
}); 


当然 ,这 会 重 现金 字 塔 厄运 。 大 家 应 该 了 解 这 种 书写 风格 , 不 过 请 尽 
量 逐 一 声明 pipe 生成 的 那些 Promise 对 象 。 也 许 并 不 需要 这 些 变 
名 称 ， 但 它们 能 让 代码 更 加 自 文档 化 。 





时 


里 





我 们 的 jQuery Promise 之 旅 到 此 就 结束 了 。 接 下 来 简单 介绍 一 下 其 主 
要 替代 方案 : CommonJS 的 Promises/A 规范 及 其 旗舰 版 实现 Q.js。 





3.7 jQuery 与 Promises/A 的 对 比 


从 功能 上 看 , jQuery 的 Promise 与 CommonJS 的 Promises/A 几乎 完全 
一 样 。Q.js 库 是 最 流行 的 Promises/A 实现 ， 其 提供 的 方法 甚至 能 太 
jQuery 的 Promise 和 谐 共 存 。 这 两 者 的 区 别 只 是 形式 上 的 ， 即 用 相同 
的 词语 表示 不 同 的 含义 。 





3.2 节 中 提 到 过 , jQuery 使 用 resolve 作为 fail 的 反义词 , 而 Promises/A 
使 用 的 是 falfill。 在 Promises/A 规范 中 , Promise 对 象 不 管 是 已 履行 还 
是 已 失败 ， 都 称 “ 已 执行 "。 


在 jQuery 1.8 问世 之 前 ，jQuery 的 then 方法 只 是 一 种 可 以 同时 调用 
done .fail 和 progress 这 3 种 回调 的 速写 法 ,而 Promises/A 的 then 
在 行为 上 更 像 是 jQuery 的 pipe。jQuery 1.8 订正 了 这 个 问题 ， 使 得 
then 成 为 pipe 的 同义词 。 不 过 ， 由 于 向 后 兼容 的 问题 ，jQuery 的 
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Promise 再 如 何 对 Promises/A 示 好 也 不 太 会 招 人 待 见 。 





当然 还 有 其 他 一 些 细 微 的 差别 。 例 如 , 在 Promises/A 规范 中 , 由 then 
方法 生成 的 Promise 对 象 是 已 执行 还 是 已 拒绝 ， 取 决 于 由 then 方法 
调用 的 那个 回调 是 返回 值 还 是 抛 出 错误 。( 在 jQuery 的 Promise 对 象 
的 回调 中 抛 出 错误 是 个 糟糕 的 主意 ， 因 为 错误 不 会 被 捕获 。) 





基于 上 述 原 因 ,应 该 尽量 避免 在 同一 个 项 目 中 与 多 个 Promise 实现 “ 打 
情 骂 俏 ”。 如 果 因 jQuery 方法 而 得 到 Promise 对 象 ， 请 使 用 jQuery 
Promise。 如 果 因 使 用 其 他 库 而 得 到 CommonJS Promise 对 象 ， 则 请 

守 Promises/A 规范 。 而 Qjs 可 以 轻松 “消化 ”jQuery 的 Promise 4 





var qPromise = Q.when(jqPromise); 
只 要 这 两 套 标 准 仍 然 存在 差异 ， 这 就 是 让 它们 融洽 相处 的 最 好 方法 。 
更 多 信息 请 参阅 Qjs 文 档 。” 








3.8 用 Promise 对 象 代替 回调 函数 


理想 情况 下 ,开始 执行 异步 任务 的 任何 函数 都 应 该 返回 Promise 对 象 。 
遗憾 的 是 ， 大 多 数 JavaScriptAPI ( 包括 所 有 浏览 器 及 Node,js 均 使 用 

的 那些 原生 函数 ) 都 基于 回调 函数 ， 而 不 是 基于 Promise 对 象 。 在 本 

节 中 ， 我 们 将 看 到 如 何在 基于 回调 函数 的 API 中 使 用 Promise 对 象 。 





在 基于 回调 函数 的 API 中 使 用 Promise 对 象 的 最 直接 的 方法 是 ， 生 成 
一 个 Deferred 对 象 并 传递 其 触发 需 函 数 作为 API 的 回调 参数 。 例 如 ， 
我 们 可 以 把 Deferred 对 象 的 resotLve 方法 传递 给 一 个 像 setTimeout 








@ 参见 https://github.com/kriskowal/q。 
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这 样 的 简单 异步 函数 。 


var timing = new $,Deferred() ; 
setTimeout(timing.resolve, 500); 


考虑 到 API 可 能 会 出 错 ， 我 们 还 要 写 一 个 根据 情况 指向 resolve 或 
reject 的 回调 函数 。 例 如 ， 我 们 会 这 样 写 Node 风格 的 回调 : 





var fileReading = new $.Deferred!(); 
fs.readFile(filename, 'utf8', function(err) { 
if (err) { 
fileReading.reject(err); 
} else { 
fileReading.resolve(Array.prototype.slice.call(arguments, 1)); 
}; 
}); 


( 没 错 , 确实 能 在 Node 中 使 用 jQuery。 只 要 运行 命令 行 npm install 
jquery 即 可 , 其 用 法 和 其 他 所 有 模块 一 样 。 还 有 一 个 库 叫 Standalone 
Deferred， 它 独立 实现 了 jQuery 风格 的 Promise。” ) 








总 这 么 写 很 麻烦 ， 所 以 何不 写 一 个 工具 函数 以 根据 任何 给 定 Deferred 
对 象 来 生成 Node 风格 的 回调 呢 ? 


deferredCallback = function(deferred) { 
return function(err) { 
if (err) { 
deferred.reject(err); 
} else{ 
deferred.resolve(Array.prototype.slice.call(arguments, 1)); 
3 
} 
} 





人 参见 https://github.com/Mumakil/Standalone-Deferred。 


有 了 这 个 工具 函数 ， 前 面 那 个 例子 就 可 以 写成 这 样 : 


var fileReading = new $.Deferred!(); 
fs.readFile(filename, 'utf8', deferredCallback(fileReading)); 


Qjs 的 Deferred 对 象 为 此 提供 了 一 个 现成 的 node 方法 : 


var fileReading = Q.defer(); 
fs.readFile(filename, 'utf8', fileReading.node()); 


随 着 Promise 越 来 越 流行 ， 会 有 越 来 越 多 的 JavaScript 库 循 着 jQuery 
的 脚步 ， 要 求 其 异步 函数 必须 返回 Promise 对 象 。 到 那 时 ， 只 需要 几 
行 代码 就 能 将 想 用 的 任何 异步 哨 数 转变 成 Promise 对 象 的 生成 函数 。 








3.9 小 结 








在 笔者 看 来 ,Promise 是 过 去 儿 年 中 jQuery 最 激动 人 心 的 新 特性 之 一 。 
这 不 仅 是 因为 Promise 大 大 有 助 于 让 意 面 式 的 回调 趋 于 平滑 ( 富 含 
Ajax 调用 的 应 用 通常 充斥 着 这 些 如 意大利 面条 般 纠 缠 在 一 起 的 回 
调 ), 而 且 也 是 因为 Promise 可 以 非常 轻松 地 协调 各 种 类 型 的 异步 任务 。 








运用 Promise 需要 一 些 实践 经 验 ， 特 别 是 使 用 pipe 时 ， 不 过 这 是 非 
常 值得 培养 的 一 种 习惯 。 你 可 以 在 此 所 见 JavaScript 的 未 来 。 返 回 
Promise 对 象 的 JavaScript API 越 多 ， 这 些 API 就 越 有 吸引 力 。 


Microsoft 已 经 声明 ，Windows 8 的 Metro 环境 将 会 提供 一 个 基于 
Promise 对 象 的 JavaScript API。? 如 果 紧 随 潮 流 的 开发 者 和 Microsoft 
步调 一 致 ， 整 个 世界 势必 会 闻 风 景 从 。 





@ 参见 http://msdn.microsoft.com/en-us/library/windows/apps/br211867.aspx。 


A 2 


顷 4 宪 


Async.js 的 工作 流 控 制 





到 目前 为 止 , 本 书 一 直 在 讨论 如 何 用 抽象 设计 来 管理 遍布 整个 应 用 的 
异步 任务 。 举 例 来 说 ，PubSub 这 种 抽象 设计 允许 应 用 程序 把 来 源 层 
的 事件 发 布 至 其 他 层 〈( 辟 如， 在 MVC 三 层 架 构 设 计 模 式 中 把 从 视图 
层 的 事件 发 布 至 模型 层 ), Promise 这 种 抽象 设计 允许 将 简单 任务 表示 
成 对 象 ， 进 而 合并 这 些 对 象 来 表示 更 复杂 的 任务 。 总 之 , 这 些 抽 象 设 
计 一 直 在 致力 于 帮助 我 们 解决 意 面 式 回调 这 一 问题 。 























不 过 我 们 的 武器 库 仍然 有 一 处 短 板 : 迭代 。 假设 需 要 执行 一 组 IO 操 
作 (或 者 并 行 执行 , 或 者 串 行 执行 ) 该 怎么 做 呢 ? 这 个 问题 在 Node 
中 非常 常见 ， 以 至 于 有 了 个 专 有 名 称 : 工作 流 控制 (也 称 作 控制 工作 
流 )。 就 像 Underscore.js 可 以 大 幅度 简化 同步 代码 中 的 和 迭 代 一 样 ， 优 
秀 的 工作 流 控制 库 也 可 以 消解 异步 代码 中 的 套话 。 














目前 最 流行 的 工作 流 控制 库 当 属 Caolan MeMahon 开发 的 强大 的 
Async.js"。 事 实 上 ， 在 我 写作 本 书 的 时 候 ，Asyncjs 是 npm ”登记 在 案 
的 请 求 第 三 多 的 库 ， 它 正 与 Underscore.js、Express 这 样 的 超级 巨星 一 








@ 参见 https://github.com/caolan/async。 
@ 参见 https://npmijs.org/。 
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起 共 沐 荣光 。 


本 章 将 探讨 Async.js 在 Node 环境 下 能 做 什么 。( 2 也 可 运行 于 
浏览 需 端 ， 不 过 很 少 有 客户 端 应 用 程序 需要 它 。) 还 会 简略 介绍 一 个 
可 代替 Async.js 的 库 一 一 Tim Caswell ， Step" 。 




















Node 及 Async.js 的 安装 


要 想 跟着 本 章 照 猫 画 虎 ,请 从 http://nodejs.org/ 获 取 最 新 版 的 Node。 
安 ， 就 可 以 (Node package manager，Node 包 管 
器 ) 了 。 使 用 下 面 这 条 命令 即 可 安装 Async.js 及 Step。 


npm install -g async step 


后 使 用 命令 行 node file.js 即 可 运行 任意 的 JavaScript 文 件 ( 其 
.js 为 JavaScript 文 件 名 )。 


4.1 异步 工作 流 的 次 序 问题 


假设 想 先 按 字母 顺序 读 取 recipes (菜谱 ) 目录 中 的 所 有 文件 ,接着 
把 读 取出 的 这 些 内 容 连 接 成 一 个 字符 串 并 显示 出 来 。 使 用 同步 方法 很 
容易 做 到 这 一 点 。 


Asyncjs/synchronous,js 
var fs = require('fs'); 
process.chdir('recipes'); // 改变 工作 目录 


var concatenation = ' '; 


fs,.readdirSync('.') 
.filter(function(filename) { 





@ 参见 https://github.com/creationix/step。 
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// 跳 过 不 是 文件 的 目录 
return fs.statSync(filename).isFile(); 
}) 
.forEach(function(filename) { 
// 内 容 添加 到 输出 上 
concatenation += fs.readFileSync(filename, 'utf8') 
}); 


console.log(concatenation); 

( 注意 ， 老 式 的 JavaScript 环境 不 支持 使 用 forEach 迭代 絮 ， 如 IE6。 
使 用 一 个 像 Kris Kowal 之 es5-shim" 这 样 的 库 可 以 解决 这 个 问题 。 在 
第 6 章 中 ， 我 们 会 学 到 如 何 只 为 有 需求 的 浏览 器 提供 库 。 ) 











， 所 有 这 种 IO 阻塞 的 效率 都 极其 低下 ， 尤 其 是 当 应 用 程序 还 能 
做 点 其 他 事情 的 时 候 。 问 题 在 于 不 能 单纯 地 将 下 面 这 行 代码 











concatenation += fs.readFileSync(filename, 'utf8'); 
换 成 异步 代码 : 


fs.readFile(filename, 'utf8', function(err, contents) { 
if (err) throw err; 
concatenation += contents; 

}); 


因为 这 么 做 根本 无 法 保证 按照 做 出 readFile 调用 的 次 序 来 触发 
readFile 调用 的 回调 。readFile 仅仅 负责 告诉 操作 系统 开始 读 取 
某 个 文件 。 对 操作 系统 而 言 , 读 取 短 文件 通常 比 读 取 长 文件 更 快 一 些 。 
因此 ,菜谱 内 容 添加 到 concatenation 字符 串 的 次 序 是 不 可 预知 的 。 
而 且 ， 在 触发 所 有 回调 之 后 ， 必 须要 运行 consoLe .Log。 








人 参见 https://github.com/kriskowal/es5-shim/。 
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要 想 使 用 很 多 异步 任务 并 且 希 望 结 果 可 预知 ， 需 要 先 做 一 点 规划 。 


4.2 ”异步 的 数据 收集 方法 


我 们 先 尝试 在 不 借助 任何 工具 函数 的 情况 下 来 解决 这 个 问题 ,笔者 能 
想到 的 最 简单 的 方法 是 : 因 前 一 个 readFile 的 回调 运行 下 一 个 
readFiLte， 同 时 跟踪 记录 迄今 已 触发 的 回调 次 数 ,并 最 终 显示 输出 。 
下 面 是 笔者 的 实现 结 





Asyncjs/seriesByHand.js 
var fs = require('fs'); 
process.chdir('recipes'); // 改变 工作 目录 


var concatenation = ; 


fs.readdir('.', function(err, filenames) { 
if (err) throw err; 


function readFileAt(i) { 
var filename = filenames[i]; 
fs.stat(filename, function(err, stats) { 
if (err) throw err; 
if (! stats.isFile()) return readFileAt(i + 1); 


fs.readFile(filename, 'utf8', function(err, text) { 
if (err) throw err; 
concatenation += text; 
if (i + 1 === filenames.length) { 
// 所 有 文件 均 已 读 取 ， 可 显示 输出 
return console.log(concatenation); 
} 
readFileAt(i + 1); 
}); 
}); 
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readFiLeAt(0) ; 
}); 


如 你 所 见 , 异步 版 本 的 代码 要 比 同步 版 本 多 很 多 。 如 果 使 用 filter、 
forEach 这 些 同步 方法 , 代码 的 行 数 大 约 只 有 一 半 , 而 且 读 起 来 也 要 
容易 得 多 。 如 果 这 些 漂亮 的 迭代 需 存 在 异步 版 本 该 多 好 啊 ! 使 用 
Async.js 就 能 做 到 这 一 点 ! 


何 时 抛 出 亦 无 妨 ? 

大 家 可 能 注意 到 了 , 在 上 面 那 个 代码 示例 中 笔者 无 视 了 自己 在 1.4 
节 中 提出 的 建议 : 从 回调 里 抛 出 蜡 常 是 一 种 业 糕 的 设计 ， 尤 其 在 
成 品 环境 中 。 不 过 ， 一 个 简单 如 斯 的 示例 直接 抛 出 异常 则 完全 没 
有 问题 。 如 果真 的 遇 到 代码 出 错 的 意外 情形 ，throw 会 关 停 代码 
并 提供 一 个 漂亮 的 堆栈 轨迹 来 解释 出 错 原 因 。 

这 里 真正 的 不 妥 之 处 在 于 ， 同 样 的 错误 处 理 逻 辑 ( 即 if(err) 
throw err ) 重复 了 多 达 3 次 ! 在 4.2.2 节 ， 我 们 会 看 到 Async.js 如 
何 帮助 减少 这 种 重复 。 


4.2.1 Async.js 的 函数 式 写 法 
我 们 想 把 同步 只 代 器 所 使 用 的 fitter 和 forEach 方 法 替换 成 相应 的 
异步 方法 。Async.js 给 了 我 们 两 个 选择 。 


口 async.filter 和 async.forEach， 它 们 会 并 行 处 理 给 定 的 数组 。 
Dasync.fiLterSeries 和 async.forEachSeries, 它们 会 顺序 处 
理 给 定 的 数组 。 





并 行 运行 这 些 异 步 操 作 应 该 会 更 快 ， 那 为 什么 还 要 使 用 序列 式 方法 
呢 ? 原因 有 两 个 。 


72 | 第 4 章 Async.js 的 工作 流 控制 


口 前 面 提 到 的 工作 流 次 序 不 可 预知 的 问题 。 我 们 确实 可 以 先 把 结果 存 
储 成 数组 ， 然 后 再 joining (联接 ) 数组 来 解决 这 个 问题 , 但 这 毕 
竞 多 了 一 个 步骤 。 

口 Node 及 其 他 任何 应 用 进程 能 够 同时 读 取 的 文件 数量 有 一 个 上 限 。 
如 果 超 过 这 个 上 限 ， ww 如 果 能 顺序 读 取 文件 , 则 
无 需 担 心 这 一 限制 。 














所 以 现在 先 搞 明白 async.forEachSeries 再 说 。 下 面 使 用 了 
Async.js 的 数据 收集 方法 ， 直 接 改 写 了 同步 版 本 的 代码 实现 。 





Asyncjs/forEachSeries.js 

var async = require('async'); 

var fs = require('fs'); 
process.chdir('recipes'); // 改变 工作 目录 
var concatenation = ''; 


var dirContents = fs.readdirSync('.'); 


async.filter(dirContents, isFilename, function(filenames) { 
async.forEachSeries(filenames, readAndConcat, onComplete); 
}); 


function isFilename(filename, callback) { 
fs.stat(filename, function(err, stats) { 
if (err) throw err; 
callback(stats.isFile()); 
}); 
} 


function readAndConcat(filename, callback) { 
fs.readFile(filename, 'utf8', function(err, fileContents) { 
if (err) return callback(err); 
concatenation += fileContents; 
callback(); 
}); 
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} 


function onComplete(err) { 
if (err) throw err; 
console.log(concatenation); 


} 

现在 我 们 的 代码 漂亮 地 分 成 了 两 个 部 分 : 任务 概貌 (表现 形式 为 
async.fiLter 调用 和 async.forEachSseries 调用 ) 和 实现 细节 ( 表 
现形 式 为 两 个 迭代 器 函数 和 一 个 完工 回调 onComplete )。 


filter 和 forEach 并 不 是 仅 有 的 与 标准 函数 式 迭 代 方 法 相对 应 的 
Async.js 工具 函数 。Async.js 还 提供 了 以 下 方法 : 


D reject/rejectSeries, 与 filter 刚好 相反 ; 
口 map/mapSeries，1:1 变换 ; 

口 reduce/reduceRight， 值 的 逐步 变换 ; 

D detect/detectSeries， 找 到 筛选 器 匹配 的 值 ; 
D sortBy， 产 生 一 个 有 序 副本 ; 

D some， 测 试 是 否 至 少 有 一 个 值 符合 给 定 标准 ; 
D every， 测 试 是 否 所 有 值 均 符合 给 定 标准 。 





这 些 方法 是 Asyncjs 的 精髓 , 令 你 能 够 以 最 低 的 代码 重复 度 来 执行 党 
见 的 迭代 工作 。 在 继续 探索 更 高 级 的 方法 之 前 , 我 们 先 来 看 看 这 些 方 
法 的 错误 处 理 技术 。 


4.2.2 ”Async.js 的 错误 处 理 技术 


初始 版 本 的 异步 代码 实现 一 共有 3 条 throw 语句 。 到 了 Async.js 版 本 
只 用 了 2 条 throw， 不 过 所 有 错误 仍然 会 被 抛 出 。Async.js 是 怎么 做 
到 的 呢 ? 为 什么 不 能 只 用 1 条 throw 呢 ? 
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简单 来 说 ,Async.js 遵守 Node 的 约定 。 这 意味 着 所 有 的 IO 回调 都 形 

如 callback(err，results...)， 唯一 的 例外 是 结果 为 布尔 型 的 回 
调 。 布尔 型 回调 的 写法 就 是 callback(result)， 所 以 上 一 代码 示例 
中 的 isFiLename 迭代 器 需要 自己 亲自 处 理 错误 。 














Asyncjs/forEachSeries.js 
function isFilename(filename, callback) { 
fs.stat(filename, function(err, stats) { 
if (err) throw err; 
callback(stats.isFile()); 
}); 
} 


要 怪 就 怪 Node 的 fs .exists 首开 这 一 先河 吧 ! 而 这 也 意味 着 使 用 了 
Asyncjs 数 据 收集 方法 ( fiLterfiLterSeries、reject/rejectSeries、 
detect/detectSeries、some、every 等 ) 的 迭代 器 均 无 法 报告 
错误 。 





对 于 非 布 尔 型 的 所 有 Async.js 迭代 器 ,传递 非 nul Wundefined 的 值 
作为 迷 代 器 回调 的 首 参 数 将 会 立即 因 该 错误 值 而 调用 完工 回调 。 这 正 
是 readAndConcat 不 用 throw 也 能 工作 的 原因 。 


Asyncjs/forEachSeries.js 
function readAndConcat(filename, callback) { 
fs.readFile(filename, 'utf8', function(err, fileContents) { 
if (err) return callback(err); 
concatenation += fileContents; 
callback(); 
}); 
} 


所 以 ， 如 果 callback(err) 确 实 是 在 readAndConcat 中 被 调用 的 ， 
则 这 个 err 会 传递 给 完工 回调 ( 即 onComplete )。Async.js 只 负责 保 
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证 onComplete 只 被 调用 一 次 ， 而 不 管 是 因 首 次 出 错 而 调用 , 还 是 因 
成 功 完成 所 有 操作 而 调用 。 
Asyncjs/forEachSeries.js 
function onComplete(err) { 
if (err) throw err; 


console.log(concatenation); 
} 


Node 的 错误 处 理 约定 对 Async.js 数据 收集 方法 而 言 也 许 并 不 理想 ， 
但 对 于 Async.js 的 6 所 有 其 他 方法 而 言 , 遵守 这 些 约定 可 以 让 错误 干 
净利 落地 从 各 个 任务 流向 完工 回调 。 下 一 节 会 看 到 更 多 这 样 的 例子 。 








4.3 Async.js 的 任务 组 织 技术 





Async.js 的 数据 收集 方法 解决 了 一 个 异步 消 数 如 何 运用 于 一 个 数据 
集 的 问题 。 但 如 果 是 一 个 函数 集 而 不 是 一 个 数据 集 ， 又 该 怎么 办 呢 ? 
本 节 将 探讨 Async,js 中 一 些 可 以 派发 异步 函数 并 收集 其 结果 的 强大 
工具 


Ze 





4.3.1 异步 函数 序列 的 运行 


假设 我 们 希望 某 一 组 异步 函数 能 依次 运行 。 在 不 使 用 工具 函数 的 情况 
下 ， 可 能 会 编写 出 类 似 这 样 的 代码 : 


funcs[0] (function() { 
funcs[1] (function() { 
funcs[2] (onComplete); 
}) 
}); 
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幸好 我 们 还 有 async.series 和 async.waterfall。 这 两 个 方法 均 
接受 一 组 函数 ( 即 任务 列表 ) 作为 参数 并 按 顺 序 运 行 它们 ， 二 者 给 任 
务 列表 中 的 每 个 函数 均 传 递 一 个 Node 风格 的 回调 。async. series 
与 async. waterfall 之 间 的 差别 是 ， 前 者 提供 给 各 个 任务 的 只 
回调 ， 而 后 者 还 会 提供 任务 列表 中 前 一 任务 的 结果 。( 所 谓 “ 结 

旨 的 是 各 个 任务 传递 给 其 回调 的 非 错误 的 值 。) 





我 们 来 看 一 个 用 延 时 实现 的 简单 例子 。 


Asyncjs/seriesTimers.js 


var async = require ('async'); 
var start = new Date; 


async.series([ 
function(callback) { setTimeout(callback, 100); }, 
function(callback) { setTimeout(callback, 300); }, 
function(callback) { setTimeout(callback, 200); } 
], function(err, results) { 
// 显示 自 Start 而 流逝 的 时 间 
console.log('Completed in ' + (new Date -start) + 'ms'); 
}); 


(将 async.series 替换 为 async.waterfall 不 会 对 这 个 例子 造成 
任何 影响 ， 因 为 这 里 各 个 任务 的 回调 在 运行 时 均 不 带 参数 。) 


因为 任务 列表 中 的 各 个 任务 会 按 顺 序 完 成 ， 所 以 会 在 600 毫秒 之 后 
(实际 上 比 600 毫秒 稍 长 一 些 ) 运行 完工 回调 ( 即 因 完成 整个 工作 流 
事件 而 调用 的 回调 , 又 称 完工 事件 处 理 需 )。 Async.js 传递 给 任务 列表 
中 每 个 函数 的 回调 好 像 在 说 :“ 出 错 了 吗 ( 回调 的 首 参 数 是 否 为 错 
误 ) ? 如 果 没 出 错 , 我 就 要 收集 结果 ( 回调 的 次 参数 ) 并 运行 下 一 个 
任务 了 。” 
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下 次 再 遇 到 一 组 需要 按 顺 序 运 行 的 异步 旺 数 时 , 请 试 试 ns series 
或 async.waterfall 吧 。 这 二 者 中 的 一 个 很 可 能 是 最 适合 完成 工作 的 
工具 


一 人 O 


4.3.2 ”异步 函数 的 并 行 运 


Async,js 提供 了 async.series 的 并 行 版 本 ， 即 async.parallel。 
就 像 async.series 一 样 ，async.parallel 也 接受 一 组 形 为 
function(callback) {...} 的 函数 作为 参数 ,但 会 再 加 上 一 个 (可 
选 的 ) 在 触发 最 末 回 调 后 运行 的 完工 事件 处 理 器 。 


前 面 那个 延 时 例子 重 写 如 下 。 


Asyncjs/parallelTimersjjs 

var async = require ('async'); 

var start = new Date; 

async.parallel([ 
function(callback) { setTimeout(callback, 100); }, 
function(callback) { setTimeout(callback, 300); }, 
function(callback) { setTimeout(callback, 200); } 

], function(err, results) { 
console.log('Completed In ' + (new Date -start) + 'ms'); 

}); 


async.series 完成 工作 流 需 要 用 掉 3 次 延 时 的 总 和 ( 约 600 毫秒 )， 
而 async.parallel 的 用 时 只 是 最 长 的 那 次 延 时 ( 约 300 毫秒 )。 


更 为 便利 的 是 ，Async,js 按照 任务 列表 的 次 序 向 完工 事件 处 理 顺 传递 
结果 ， 而 不 是 按照 生成 这 些 结果 的 次 序 。 这 样 ， 我 们 既 拥 有 了 并 行 机 
制 的 性 能 优势 ， 又 没有 失去 结果 的 可 预知 性 。 











async.series、async.waterfall、async.parallel 与 那些 数据 
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收集 方法 一 起 , 诠释 了 Asyncjs 的 内 核 与 灵魂 ; 为 最 常见 的 异步 情景 
提供 简单 又 省 时 的 工具 函数 。 
4.4 异步 工作 流 的 动态 排队 技术 


大 多 数 情 况 下 ， 前 两 节 介 绍 的 那些 简单 方法 足以 解决 我 们 的 异步 窘 
境 , 但 async.series 和 async.parallel 均 存 在 各 自 的 局 限 性 。 





口 任务 列表 是 静态 的 ,一 旦 调用 了 async.series 或 async.parallel， 
就 再 也 不 能 增 减 任务 了 。 

口 不 可 能 问 :“ 已 经 完成 多 少 任务 了 ? ”任务 处 于 黑箱 状态 ， 除 非 我 
们 自行 从 任务 内 部 派发 更 新 信息 。 

口 只 有 两 个 选择 , 要 么 是 完全 没有 并 发 性 , 要么 是 不 受 限制 的 并 发 性 。 
这 对 文件 IO 任务 可 是 个 大 问题 。 如 果 要 操作 上 千 个 文件 ， 当 然 不 
想 因 按 顺序 操作 而 效率 低下 , 但 如 果 试 着 并 行 执行 所 有 操作 ,又 很 
可 能 会 激怒 操作 系统 。 

















Asyncjs 提供 了 一 种 可 以 解决 上 述 所 有 问题 的 全 能 方法 : async. queue。 
4.4.1 深入 理解 队列 


async.queue 的 底层 基本 理念 令 人 想起 DMV ( Dynamic Management 
View， 动 态 管理 视图 )。 它 可 以 同时 应 对 很 多 人 ( 最 多 时 等 于 在 岗 办 
事 员 的 数目 ), 但 并 不 是 每 位 办 事 员 前 面 各 排 一 个 队 ， 而 是 维持 着 一 
个 排 号 队列 。 人 到 了 就 排队 ,并 取得 一 个 排队 号 码 。 任 何 一 个 办 事 员 
空闲 时 ， 就 会 叫 下 一 个 排队 号 码 。 





async.queue 的 接口 比 async.series 和 async.parallel 稍微 复 
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杂 一 些 。async.queue 接受 的 参数 有 两 个 : 一 个 是 worker (办事员 ) 
国 数 ， 而 不 是 一 个 函数 列表 ; 一 个 是 代表 着 concurrency ( 并 发 度 ) 
的 值 ， 代 表 了 办 事 员 最 多 可 同时 人 处理 的 任务 数 。async.queue 的 返 
回 值 是 一 个 队列 , 我 们 可 以 向 这 个 队列 推 入 任意 的 任务 数据 及 可 选 的 
回调 。 





下 面 是 一 个 小 例子 。 


Asyncjs/simpleQueue.js 
var async = require('async'); 


function worker(data, callback) { 
console.1log(data); 
callback(); 

} 

var concurrency = 2; 

var queue = async.queue(worker, concurrency); 

queue.push(1); 

queue.push(2); 

queue.push(3); 


不 论 并 发 度 是 多 少 〈 只 要 不 小 于 1 )， 都 会 得 到 以 下 输出 。 
《1 
3 


不 过 内 在 还 是 有 点 小 区 别 : 并 发 度 为 2 时， 需要 两 轮 才 能 凯 历 事件 队 
列 ;如果 并 发 度 为 1， 则 需要 3 轮 才能 遍历 ， 每 轮 输出 一 行 代码 ; 如 
果 并 发 度 为 3 或 更 大 的 值 ， 则 只 需要 1 轮 即 可 遍历 。 














并 发 度 为 0 的 队列 不 会 做 任何 事情 。 如 果 想 要 最 大 的 并 发 度 , 请 直接 
使 用 Infinity 关键 字 。 
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4.4.2 任务 的 入 列 

虽然 queue.push 与 [] .push 同名 ， 但 二 者 存在 两 个 很 关键 的 差别 。 
第 一 个 差别 。 请 看 这 行 代码 : 

queue.push([1, 2, 3]); 

它 等 价 于 下 面 这 3 行 代码 : 


queue.push(1); 
queue.push(2); 
queue.push(3); 


这 意味 着 不 能 直接 使 用 数组 作为 任务 的 数据 。 不 过 可 以 使 用 其 他 任何 
东西 (甚至 函数 ) 作为 任务 的 数据 。 事实 上 ， 如果 想 让 async.queue 
像 async.series/async.parallel 那样 也 使 用 一 组 函数 作为 任务 
列表 ， 只 需 定 义 一 个 其 次 参数 会 直接 传递 给 其 首 参 数 的 worker 函数 。 














function worker(task, callback) { 
task(callback); 

} 

var concurrency = 2; 

var queue = async.queue(worker, concurrency); 

queue.push(tasks); 


第 二 个 差别 。 async .queue 中 的 每 次 push 调用 可 附带 提供 一 个 回调 
函数 。 如 果 提 供 了 ， 该 回调 函数 会 直接 送 给 worker 函数 作为 其 回调 
参数 。 因 此 ,，( 假设 worker 函数 确实 运行 了 其 回调 ， 即 它 未 因 抛 出 错 
误 而 直接 关 停 ) 下 面 这 个 例子 将 会 触发 3 次 输出 事件 ， 即 输出 3 次 


'Task complete!'。 

















queue.push([1, 2, 3], function(err, result) { 
console.log('Task complete!'); 
}); 
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对 async.queue 而 言 , push 方法 的 回调 孔 数 非常 重要 , 因为 async. 
queue 不 像 async.series/async.parallel 那样 可 以 在 内 部 存储 每 
次 任务 的 结果 。 如 果 想 要 这 些 结果 ， 就 必须 自行 去 捕获 。 


4.4.3 ”完工 事件 的 处 理 


和 async.series 及 其 类 似 方法 一 样 ， 我 们 也 可 以 给 async .queue 
指定 一 个 完工 事件 处 理 器 。 不过, 这 时 并 不 是 传递 完工 事件 处 理 器 作 
为 async.queue 方法 的 参数 , 而 是 要 附加 它 作 为 async,queue 对 象 
的 drain ( 排 空 ) 属性 。( 请 想象 有 一 个 倪 ， 里 面 满 是 待 完 成 的 任务 。 
当 最 后 一 个 任务 也 排 空 流出 盆 时 ， 就 会 触发 完工 事件 的 回调 。) 下 面 
用 计时 器 做 了 一 个 示例 。 











Asyncjs/queueTimers.js 


var async = require('async'); 


function worker(data, callback) { 
setTimeout(callback, data); 
} 
var concurrency = 2; 
var queue = async.queue(worker, concurrency); 
var start = new Date; 
queue.drain = function() { 
console.log('Completed in ' + (new Date -start) + 'ms'); 
于 


queue.push([100, 300, 200]); 

回想 一 下 : async.series 完成 工作 流 需 要 大 约 600 毫秒 的 时 间 (3 
次 延 时 的 总 和 )， 而 async .parallel 只 用 掉 约 300 毫秒 ( 即 最 长 的 
那 次 延 时 )。 这 里 的 并 发 度 为 2， 所 以 工作 流 一 开始 就 会 并 行 运 行 前 
两 次 延 时 。 不 过 结束 运行 那 次 100 毫秒 的 延 时 之 后 ， 队 列 里 的 下 一 个 
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任务 ( 即 200 毫秒 的 延 时 ) 将 会 立即 开始 运行 。 因 此 , 在 这 种 情况 下 ， 
async.queue 和 async.parallel 差不多 在 同一 时 刻 结束 运行 。 这 
里 工作 流 的 次 序 起 到 了 关键 作用 : 如 果 第 3 次 人 列 的 是 那个 300 毫秒 
的 延 时 任务 ， 则 整个 队列 需 用 时 约 400 毫秒 才能 完成 。 


注意 ， 可 以 一 直 调 用 push 方法 向 队列 推 人 更 多 后 续 任务 ， 而且， 每 
当 队 列 中 的 未 任务 结束 运行 时 ， 都 会 触发 一 次 drain ( 也 就 是 说 ， 如 
果 任 务 队列 完工 之 后 再 让 新 任务 人 列 , 新 任务 队列 的 完工 也 同样 会 触 
发 完工 事件 处 理 器 )。 遗 憾 的 是 ， 这 意味 着 async.queue 不 能 像 
async.waterfall 那样 提供 清晰 排序 的 结果 。 如 果 想 收集 那些 人 列 
的 任务 的 结果 数据 ， 就 只 能 靠 自 己 了 。 











4.4.4 ”队列 的 高 级 回调 方法 


尽管 drain 常常 是 我 们 唯一 要 用 到 的 事件 处 理 器 ,但 async .queue 
还 是 提供 了 其 他 一 些 事件 及 其 处 理 器 。 








口 队 末 任务 开始 运行 时 , 会 调用 队列 的 empty 方法 。( 队 末 任务 运行 

结束 时 ， 会 调用 队列 的 drain 方法 。) 

D 达到 并 发 度 的 上 限时 ， 会 调用 队列 的 saturated 方法 。 

口 如 果 提 供 了 一 个 函数 作为 push 方法 的 次 参数 ， 则 在 结束 运行 给 定 
任务 时 会 调用 该 函数 ,或 在 给 定 任 务 列表 中 的 每 个 任务 结束 运行 时 
均 调 用 一 次 该 函数 。 

在 本 节 中 ,我 们 已 经 看 到 async.queue 为 何 成 为 了 最 强大 的 Async.js 

函数 之 一 。 如 果 需 要 在 有 限 的 并 发 度 下 运行 大 量 的 异步 任务 ， 请 考虑 

使 用 async.queue。 











Async.js 是 使 用 最 广泛 、 当 然 也 是 功能 最 丰富 的 JavaScript 工作 流 控 
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制 库 ， 针 对 它 的 讨论 到 此 为 止 。 不 过 , 请 勿 以 为 对 于 所 有 基于 回调 驱 
动 的 任务 来 说 ，Async.js 都 是 一 种 恰当 的 工具 。 下 面 将 介绍 Async.js 
最 大 的 竞争 对 手 之 Step。 











4.5 极 简 主 义 者 Step 的 工作 流 控制 


Tim Caswell 的 Step" 是 一 个 轻 量 级 的 JavaScript 库 。 事 实 上 ，Step 的 
API 集 只 有 一 个 函数 : Step。 


Step 接受 一 个 函数 列表 作为 参数 ， 例 子 如 下 。 
Step(taskl, task2, task3); 


其 中 的 每 一 个 函数 都 有 3 种 控制 工作 流 的 方式 。 








口 它 可 以 调用 this， 让 Step 直接 运行 列表 中 的 下 一 个 函数 。 

口 它 可 以 调用 nn 次 由 this.parallel 或 this.group 生成 的 回调 ， 
以 告诉 Step 应 运行 列表 中 的 下 一 个 函数 nn 次 。 

口 它 可 以 返回 一 个 值 ， 这 也 会 让 Step 运行 列表 中 的 下 一 个 函数 。 这 
简化 了 同步 函数 与 异步 函数 的 混合 使 用 。 

















一 个 函数 会 收 到 上 一 个 函数 的 结果 ( 或 者 是 其 返回 的 值 , 或 者 是 其 
传递 给 this 的 参数 ), 或 者 是 上 一 函数 所 有 实例 的 结果 ( 如 果 因 this . 
parallel 或 this .group 而 运行 该 函数 的 话 )。 其 区 别 在 于 ，this. 
parallel 会 将 结果 作为 一 个 个 单独 的 参数 来 提供 ， 而 this .group 
会 将 结果 合并 成 数组 。 








@ 参见 https://github.com/creationix/step。 


84 | 第 4 章 Async.js 的 工作 流 控制 


在 笔者 写作 本 书 时 ， 整 个 Step 库 的 代码 仅 有 152 行 〈 含 注释 ), 但 它 
足以 应 对 大 多 数 异步 工作 流 。 这 种 极 简 主义 的 不 足 是 , 要 想 理解 Step 
生成 的 工作 流 ， 只 有 去 通读 其 中 的 每 一 个 函数 。 而 无 所 不 包 、 无 所 不 
能 的 Asyncjs 所 生成 的 工作 流 一 般 更 能 够 自我 解释 。 








不 过 ， 如 果 想 自己 动手 、 亲 历 亲 为 ， 那 么 用 Step 来 写 一 些 类 似 于 
Async.js 的 工具 函数 会 是 一 种 很 好 的 练习 。 例 如 , 下 面 只 用 11 行 代码 
就 实现 了 等 价 的 async.map。 


Asyndjs/stepMap.js 
var Step = require('step'); 


function stepMap(arr, iterator, callback) { 
Step( 
function() { 
var group = this.group(); 
for (var i = 0; i < arr.length; i++) { 
iterator(arr[i], group()); 
} 
}, 
callback 
); 
} 


笔者 认为 使 用 Step 能 让 人 耳目 一 新 ,使 用 Async.js 主要 是 想 找到 最 适 
合 任 务 的 那个 工具 函数 ， 而 Step 却 能 鼓励 我 们 透彻 地 思考 问题 并 编 
写 出 优雅 高 效 的 解决 方案 。 





4.6 小结 








本 章 介 绍 了 如 何 借 助 合适 的 工作 流 控制 函数 用 最 少量 的 重复 代码 来 
实现 常见 的 异步 工作 流 模 式 。Async.js 已 经 成 为 首届 一 指 的 工作 流 控 


制 库 , 它 既 提供 了 健壮 的 迭代 式 数据 收集 方法 , 又 实现 了 可 靠 的 调度 
se、 如 果 遇 到 了 工作 流 控制 问题 ，Async.js 很 可 能 有 解决 方 
。 如 果 你 喜欢 自己 解决 ， 不 妨 使 用 Step。 








Isaac Schlueter 是 Node.js 项 目的 首席 开发 者 ， 他 曾经 做 过 一 个 非常 小 
的 工作 流 控制 库 。 该 库 名 为 Slide ， 可 用 于 npm 环境 中 。 在 Slide 的 
README ( 请 先 阅读 ) 文件 中 ，Isaac Schlueter 写 道 : 





应 该 把 Slide 当 作 一 个 示例 ， 它 演示 了 如 何 编写 属于 自己 的 工作 流 
控制 工具 。 如 果 没 有 亲手 写 过 工作 流 控 制 库 ， 就 永远 不 会 真正 地 
了 解 它 。 


笔者 觉得 这 种 说 法 并 不 对 。 编写 工作 流 控制 库 确 实 是 很 好 的 练习 , 但 
没有 必要 为 了 看 看 轮子 是 怎么 工作 的 就 重新 发 明 轮 子 。 随 着 
JavaScript 生态 系统 的 成 熟 ， 工 作 流 控 制 的 概念 会 越 来 越 普及 ， 越 来 
越 标准 化 。 暂 时 而 言 ， 如 果 你 的 应 用 需要 工作 流 控制 , 那么 最 重要 的 
是 选择 一 个 好 的 工作 流 控制 库 并 掌握 它 。 




















@ 参见 https://github.com/isaacs/slide-flow-control。 
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worker 对 象 的 多 线程 技术 





本 书 一 开始 就 说 过 事件 是 多 线程 技术 的 替代 品 。 更 准确 地 说 , 事件 能 
够 代替 一 种 特殊 的 多 线程 , 即 应 用 程序 进程 可 拆 分 成 多 个 部 分 同时 运 
行 的 多 线程 技术 ( 或 者 通过 中 断 技 术 虚 拟 实现 ， 或 者 通过 多 个 CPU 
内 核 真正 实现 )。 但 如 果 不 同 线程 中 运行 的 代码 需要 访问 同一 数据 ， 
则 会 出 现 问题 。 即 便 是 一 行 简单 如 斯 的 代码 























i++; 

一 旦 允许 不 同 的 线程 同时 修改 同一 个 i， 也 会 变 成 毁灭 性 的 海 森 堡 蚁 
虫 (Heisenbug ) "之 家 。 幸 亏 这 种 多 线程 技术 在 JavaScript 里 是 不 可 
能 的 。 











男 一 方面 ， 向 多 颗 CPU 内 核 分 发 任务 又 日 益 成 为 基本 需求 ， 因 为 这 
些 CPU 内 核 不 再 像 过 去 期 望 的 那样 持续 地 大 幅 提 升 效率 。 因 此 ， 我 
们 需要 多 线程 技术 。 那 这 是 否 意 味 着 要 放弃 基于 事件 的 编程 呢 ? 








@ 参见 http://en.wikipedia.org/wiki/Heisenbug。Heisenbug 指 的 是 在 成 品 环境 下 会 不 经 
意 出 现 ， 但 费 尽 九 牛 二 虎 之 力 却 无 法 重 现 的 计算 机 bug。 一 一 译 者 注 
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恰恰 相反 ! 尽管 只 运行 在 一 个 线程 上 确实 不 怎么 理想 , 但 天 真 地 将 应 
用 直接 分 发 给 多 个 内 核 更 加 粮 粮 。 多 内 核 系 统 的 那些 内 核 如 果 必须 经 
常 交 谈 以 避免 相互 拆 台 ,那么 整个 系统 就 会 慢 得 像 蜗 牛 代 一 样 。 最 好 
能 让 每 颗 内 核 领取 一 项 独立 的 作业 ， 然 后 偶尔 同步 一 下 。 


JavaScript 中 的 worker ( 办事员 ) 对 象 就 是 这 么 干 的 。 应 用 程序 的 主 
线程 可 以 这 样 跟 worker 说 :“ 去 ， 开 一 个 单独 的 线程 来 运行 这 段 代 
人 码 。”worker 可 以 给 我 们 发 送 消 息 ( 反 之 亦 可 )， 其 表现 形式 是 事件 队 
列 中 运行 的 回调 (还 能 是 别 的 吗 ? )。 简 而 言 之 ， 与 不 同 线程 进行 交 
互 的 方式 与 在 JavaScript 中 进行 IO 操作 一 模 一 样 。 








本 章 会 讲述 浏览 器 端 及 Node 环境 中 的 worker 对 象 , 还 会 讨论 一 些 实 
践 应 用 。 


线程 与 进程 的 对 比 
本 章 反 复 絮 外 的 线程 /进程 这 两 个 词 是 可 以 互 换 的 。 但 在 操作 系统 
的 层面 ， 这 两 者 存在 一 个 重要 的 区 别 : 同一 个 进程 内 的 多 个 线程 
之 间 可 以 分 享 状态 ， 而 彼此 独立 的 进程 之 间 则 不 能 。 但 在 
JavaScript 环 境 中 ， 由 Worker 对 象 运行 的 并 发 代码 从 来 不 会 分 享 状 
态 。 所 以 ， 尽 管 可 以 使 用 轻 量 级 ODS 线程 来 实现 worker 对 象 ， 但 它 
们 的 行为 更 像 是 进程 。 


有 一 些 Node 库 为 了 效率 而 允许 破坏 关于 状态 分 享 的 游戏 规则 ， 其 
中 最 著名 的 当 属 Threads-A-GoGoas。 这 些 已 经 超出 了 本 章 的 范畴 ， 
本 章 只 关心 标准 JavaScript 环 境 中 的 并 发 性 。 





a. 参见 https:/github.com/xk/node-threads-a-gogo。 
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5.1 网 页 版 worker 对 象 























网 页 版 worker 对 象 是 大 名 易 易 的 HTML5 标准 的 一 部 分 。 要 想 生 成 
worker 对 象 ， 只 需 以 脚本 URL 为 参数 来 调用 全 局 Worker 构造 函数 
即 可 。 

var worker = new Worker('worker.js'); 
worker.addEventListener('message', function(e) { 


console.log(e.data); // 重复 由 postMessage 发 送 的 任何 东西 
}); 


(通常 ， 我 们 只 用 到 message 事件 的 data 属性 。 如 果 已 经 把 同一 个 
事件 处 理 需 绑 定 至 多 个 worker 对 象 , 则 可 能 还 要 用 到 e.target 以 定 
位 是 哪 一 个 worker 对 象 触发 了 事件 。) 








现在 我 们 知道 如 何 监听 worker 对 象 了 。worker 对 象 的 交互 接口 呈现 出 
便利 的 对 称 设计 : 我 们 可 以 使 用 worker .postMessage 来 发 送 消息 ， 
而 worker 本 身 可 以 使 用 self.addEventListener('message',...) 
来 接收 消息 。 下 面 是 一 个 完整 的 例子 。 








// 主 脚 本 

var worker = new Worker('boknows.js'); 

worker.addEventListener('message', function(e) { 
console.log(e.data); 

}); 

worker.postMessage('football'); 

worker.postMessage('baseball'); 


// boknows.jis 

self.addEventListener('message', function(e) { 
self.postMessage('Bo knows ' + e.data); 

}); 
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大 家 可 以 在 笔者 创建 的 一 个 小 网 站 上 ( Web Worker Sandbox”)“ 把 
玩 ”worker 对 象 的 这 种 消息 传递 接口 。 创 建 一 个 新 例子 之 后 ， 你 会 得 
到 一 个 可 与 他 人 分 享 的 唯一 URL 地 址 。 








5.1.1 网 页 版 worker 对 象 的 局 限 性 


网 页 版 worker 对 象 的 首要 目标 是 , 在 不 损害 DOM 响应 能 力 的 前 提 下 
处 理 复杂 的 计算 。 它 有 以 下 几 种 潜在 用 法 : 


口 解码 视频 。 流 入 的 视频 采用 Broadway 实现 的 H.264 编 解码 器 ”。 
口 采用 斯 坦 福 的 JavaScript 加 密 库 * 加 密 通信 。 
口 解析 网 页 式 编辑 器 中 的 文本 。 没 错 ， 就 是 Ace 编辑 器 "。 






































事实 上 , Ace 默认 已 经 这 么 做 了 。 在 基于 Ace 的 编辑 器 中 键入 代 码 时 ， 
Ace 需 要 先进 行 一 些 相 当 繁 重 的 字符 串 分 析 , 然后 再 使 用 恰当 的 语法 
高 亮 格式 更 新 DOM。 在 现代 浏览 器 中 ， 这 种 分 析 工 作 通 常会 吃 开 一 
个 独立 线程 来 做 ， 以 确保 编辑 器 能 保持 平滑 度 和 响应 度 。 


























通常 情况 下 ,worker 对 象 会 把 自己 的 计算 结果 发 送 给 主线 程 , 由 主线 
程 去 更 新 页 面 。 为 什么 不 直接 更 新 页 面 呢 ? 这 主要 是 为 了 保护 
JavaScript 异步 抽象 概念 ， 使 其 免 受 影响 。 如 果 worker 对 象 可 以 改变 
页 面 的 标记 语言 ,那么 最 终 的 下 场 就 会 和 Java 一 样 一 一 必须 将 DOM 
操控 代码 封装 成 互 斥 量 和 信和 号 量 以 避免 竟 态 条 件 。 























基于 类 似 的 理由 ，worker 对 象 也 看 不 到 全 局 的 window 对 象 和 主线 程 








@ 参见 http://webworkersandbox.com/。 

@ 参见 https://github.com/mbebenita/Broadway。 
@ 参见 http://crypto.stanford.edu/sjcl/。 

@ 参见 http://ace.ajax.org/。 
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及 其 他 worker 线程 中 的 其 他 任何 对 象 。 通过 postMessage 发 送 的 对 
象 会 透明 地 作 序 列 化 和 反 序 列 化 ， 想 想 JSON.parse(JSON. 
stringify(obj)) 吧 。 因 此 , 原始 对 象 的 变化 不 会 影响 该 对 象 在 其 他 
线程 中 的 副本 。 








worker 对 象 甚至 不 能 使 用 老实 可 靠 的 console 对 象 。 它 只 能 看 到 自 
己 的 全 局 对 象 self, 以 及 self 已 捆绑 的 所 有 东西 :标准 的 JavaScript 
对 象 (如 setTimeout 和 Math )， 以 及 浏览 器 的 Ajax 方法。 


对 了 , 还 有 Ajax! worker 对 象 可 以 随意 使 用 XMLHttpRequest。 如 果 
浏览 器 端 支持 的 话 ， 它 甚至 能 使 用 WebSocket。 这 意味 着 worker 可 
以 直接 从 服务 器 拉 取 数据 。 如 果 要 处 理 大 量 数 据 ( 璧 如 说 ， 流 传输 一 
段 需要 解码 的 视频 )， 相 比 于 使 用 postMessage 来 序列 化 这 些 数据 ， 
将 数据 封闭 在 一 个 线程 中 会 更 好 。 








还 有 一 个 特殊 的 importScripts 函数 可 以 同步 地 加 载 并 运行 指定 的 
脚本 。 
importScripts('https://raw.github.com/gist/1962739/danika.js'); 


正常 情况 下 ， 同 步 加 载 是 绝对 禁忌 ， 不 过 worker 对 象 跑 的 是 男 一 个 
线程 。 既 然 worker 已 经 无 所 事 事 了 ， 那 么 阻塞 就 阻塞 好 啦 ! 














5.1.2 ”支持 网 页 版 worker 的 浏览 昌 


在 桌面 端 ，Chrome、Firefox 及 Safari 都 已 实现 网 页 版 worker 标准 好 
几 年 了 ,现在 IE 10 也 内 般 了 这 一 标准 。 移 动 端的 支持 情况 也 可 圈 可 
点 。 最 新 的 iOS 版 Safari 支持 网 页 版 worker， 但 最 新 版 的 Android 浏 
览 器 还 不 支持 。 在 笔者 写作 本 书 的 时 候 ，Caniuse.com 统计 认为 浏览 
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器 端 对 网 页 版 worker 的 支持 率 达 59.12%。?” 


简单 来 说 ， 大 家 不 能 指望 自己 网 站 的 用 户 支 持 网 页 版 worker。 不 过 ， 
即便 window.Worker 不 可 用 ， 也 可 以 轻松 用 热 片 技术 保证 目标 脚本 
的 正常 运行 。 毕 竟 ， 网 页 版 worker 只 是 一 种 性 能 增强 工具 。 





请 认真 地 对 多 个 浏览 器 端 测试 网 页 版 worker, 因为 不 同 的 训 览 器 实现 
之 间 存 在 一 些 至 关 重 要 的 差异 。 例 如 ，Firefox 人 允许 worker 对 象 孵化 
出 自己 的 “worker 子 对 象 "， 但 Chrome 目前 还 不 支持 这 么 做 。 


5.2 cluster 带 来 的 Node 版 worker 





在 Node 的 早期 阶段 , 有 很 多 API 竞相 抢 食 多 线程 这 块 肥 肉 , 其 中 大 多 
数 API 的 实现 都 很 春 笨 ， 不 断 要 求 用 户 搞 出 多 个 服务 器 实例 以 监听 不 
同 的 TCP 端口 ， 然 后 再 通过 代理 回 钓 到 真正 的 端口 。 直 到 发 行 了 0.6 
版 本 ， 才 推出 了 一 个 支持 多 个 进程 绑 定 至 同一 端口 的 标准 API: 
cluster ( 群集) 2 。 





通常 情况 下 ， 会 为 了 追求 最 佳 性 能 而 使 用 cLuster 按 每 颗 CPU 内 核 
分 化 出 一 个 进程 ( 尽管 每 个 进程 是 否 能 真正 得 到 属于 自己 的 内 核 仍 完 
全 取决 于 底层 的 操作 系统 )。 








Multithreading/cluster.js 
var cluster = require('cluster'); 
if (cluster.isMaster) { 
// 分 化 出 worker 对 象 
var coreCount = require('os').cpus().length; 





参见 http://caniuse.com/webworkers。 
i 





中 
©® 


Sy 


参 册 http://nodejs.org/docs/latest/api/cluster.html。 
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for (var i = 0; i < coreCount; I++) { 
cluster.fork(); 
} 
// 绑 定 death 事件 
cluster.on('death', function(worker) { 
console.log('Worker ' + worker.pid + ' has died'); 
}); 
} else { 
// 立即 死去 
process.exit()，; 
} 


输出 形 如 : 


《Worker 15330 has died 
Worker 15332 has died 
Worker 15329 has died 
Worker 15331 has died 


其 中 每 行 输出 对 应 一 颗 CPU 内 核 。 








这 上段 代码 看 似 莫名 其 妙 ， 其 玄妙 之 处 在 于 ， 网 页 版 worker 对 象 会 加 
载 一 个 独立 的 脚本 ， 而 Node 版 worker 对 象 则 由 cLuster.fork() 把 
运行 自己 的 同一 个 脚本 再 次 加 载 成 一 个 独立 的 进程 。 运 行 中 的 脚本 要 
想 知 道 自 己 是 主 进程 还 是 worker 对 象 ， 唯 一 的 办 法 就 是 检查 


CLuster. isMaster。 











为 什么 做 出 这 样 的 设计 决策 呢 ? 因为 Node 版 多 线程 技术 的 使 用 情况 
与 浏览 器 端 有 很 大 不 同 。 浏 览 器 可 以 将 任意 多 余 的 线程 降格 为 后 台 任 
务 , 而 Node 服务 融 则 要 留 出 计算 资源 以 保障 其 主要 任务 : 处 理 请 求 。 





(使 用 child process.fork" 也 可 以 将 外 部 脚本 加 载 为 独立 的 进程 





@ 参见 http://nodejs.org/docs/latest/api/child _ process.html。 
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来 运行 。 除 了 子 进 程 不 能 分 享 TCP 端口 之 外 , chitLd_process ,fork 
的 功能 几乎 和 cLuster.fork 完全 一 样 ， 事 实 上 cLuster 内 在 里 就 
使 用 了 child process。 ) 


5.2.1 Node 版 worker 的 交互 接口 


和 网 页 版 worker 对 象 一 样 ，cluster 分 化 出 的 worker 对 象 通过 发 送 
消息 事件 来 与 主 进 程 交流 ， 反 之 亦 然 。 不 过 ， 这 里 的 API 稍 有 不 同 。 


Multithreading/clusterMessage.js 











var cluster = require('cluster'); 
if (cluster.isMaster) { 
// 分 化 worker 对 象 
var coreCount = require('os').cpus().length; 
for (var i = 0; i < coreCount; i++) { 
var worker = cluster.fork(); 
worker.send('Hello, Worker!'); 
worker.on('message', function(message) { 
If (message. queryId) return; 
console.log(message); 
}); 
} 
} else{ 
process.send('Hello, main process!'); 
process.on('message', function(message) { 
console.log(message); 
}); 
} 


输出 形 如 : 


Hello, main process! 
Hello, main process! 
Hello, Worker! 
Hello, Worker! 
Hello, main process! 
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Hello, Worker! 
Hello, main process! 
Hello, Worker! 


这 里 的 输出 次 序 是 不 可 预知 的 ， 因 为 每 个 线程 都 亮相 抢占 
console.10g。( 大 家 必须 用 Ctrl+C 快捷 键 手动 结束 此 进程 。) 


和 网 页 版 worker 一样 ,Node 版 worker 对 象 的 API 也 是 对 称 的 ， 此 端 
的 send 调用 会 触发 彼 端的 'message ' 事 件 。 但 需要 注意 的 是 ，send 
的 参数 ( 更 确切 的 说 法 是 参数 的 序列 化 副本 ) 直接 由 'message' 事 件 
指定 ， 而 不 是 附加 作为 事件 的 data 属性 。 














注意 到 主 消息 处 理 器 的 这 行 代码 了 吗 ? 
if (message. queryId) return; 


Node 有 时 会 基于 worker 对 象 发 送 自 己 的 消息 ， 发 送 命令 始终 形 如 : 





{ cmd: 'online', queryId: 1, workerId: 1 } 

忽略 这 些 内 部 消息 也 没什么 危险 , 但 要 知道 这 些 消 息 会 在 后 台 施 展 一 
些 重要 的 魔法 。 其 中 最 著名 的 魔法 是 : 多 个 worker 对 象 试图 监 折 
(Listen ) 一 个 TCP 端口 时 ，Node 利用 内 部 消息 来 允许 分 享 该 端口 。 

















5.2.2” Node 版 worker 对 象 的 局 限 性 


大 多 数 情况 下 ,cluster 对 象 和 网 页 版 worker 对 象 遵 守 同 样 的 规则 : 
有 一 个 主线 程 和 多 个 worker 线程 ， 它 们 之 间 的 交流 基于 一 些 带 有 序 
列 化 对 象 或 附 连 字 符 串 的 事件 。 不 过 ， 网 页 版 worker 在 浏览 器 端 显 
然 是 二 等 公民 , 而 Node 版 worker 却 几 乎 拥有 主线 程 的 所 有 权利 和 权 
限 ， 但 以 下 这 些 除 外 ( 但 不 限于 这 些 ): 
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口 关 停 应 用 程序 的 能 
D 孵化 出 更 多 worker 对 象 的 能 
D 彼此 交流 的 能 力 。 





这 使 得 主线 程 必须 承担 起 作为 所 有 线程 间 通 信之 中 转 中 心 的 重任 。 
幸运 的 是 , 这 种 不 便 可 以 通过 像 Roly Fentanes 之 Clusterhub" 这 样 的 
库 抽象 出 去 。 


在 本 节 中 , 我 们 看 到 了 worker 对 象 为 何 成 为 Node 的 一 个 有 机 组 成 部 
分 ， 以 及 它 人 允许 服务 器 充分 利用 多 颗 内 核 而 无 需 运 行 多 个 应 用 实例 。 
Node API 之 cluster 文 持 并 发 运行 同一 个 脚本 (一 个 主 进 程 和 任意 
多 个 worker 进程 )。 为 了 尽 可 能 减少 线程 间 通 信 的 开销 ， 线 程 间 分 享 
的 状态 应 该 存储 在 像 Redis 这 样 的 外 部 数据 库 中 。 


5.3 ”小结 


尽管 说 这 话 为 时 尚 早 ， 但 笔者 依然 认为 多 内 核 JavaScript 的 前 途 一 片 
光明 。 任何 应 用 只 要 可 以 拆 分 成 大 体 独立 且 彼 此 间 只 需 定期 交互 的 多 
个 进程 ， 那 么 worker 对 象 就 是 一 种 可 以 充分 利用 CPU 性 能 的 致胜 方 
案 。 分 布 式 计算 从 来 都 是 妙趣 横生 的 。 











@ 参见 https://github.com/fent/clusterhub。 


A 2 


旬 60 蛙 


寞 步 的 脚本 加 载 





先 来 看 这 行 代码 : 
<script src = "allMyClientSideCode.js"></script> 


这 有 点 儿 …… 不 怎么 样 。“ 这 该 放 在 哪儿 ? ”开发 人 员 会 奇怪 ,“ 靠 上 
点 ， 放 到 <head> 标 签 里 ? 还 是 靠 下 点 ， 放 到 <body> 标 签 里 ? ”这 两 
种 做 法 都 会 让 寅 脚本 站 点 的 下 场 很 囊 惨 。<head> 标 签 里 的 大 脚本 会 
沛 压 所 有 页 面 浑 当 工作, 使 得 用 户 在 脚本 加 载 完毕 之 前 一 直 处 于 “ 白 
屏 死机 ” "状态 。 而 <body> 标 签 未 尾 的 大 脚本 只 会 让 用 户 看 到 毫 无 生 
命 力 的 静态 页 面 , 原本 应 该 进行 客户 端 浑 染 的 地 方 却 散布 着 不 起 作用 
的 控件 和 空空 如 也 的 方 框 。 

















完美 解决 这 个 问题 需要 对 脚本 分 而 治之 : 那些 负责 让 页 面 更 好 看 、 更 
好 用 的 脚本 应 该 立即 加 载 , 而 那些 可 以 待 会 儿 再 加 载 的 脚本 稍 后 再 加 
载 。 但 是 怎样 才能 既 清 压 这 些 脚 本 ， 又 能 保证 它们 在 被 调用 时 的 可 用 
性 呢 ? 








Q@ .JavaScript Performance Rocis/ 一 书 的 作者 Amy Hoy 和 Thomas Fuchs 杜撰 了 “ 白 
死机 ”( White Screen of Death ) 这 个 词 。 这 本 大 作 可 视 为 目前 前 端 JavaScript 性 
优化 领域 最 权威 的 资料 ， 参 见 http://javascriptrocks.com/performance/。 译 者 尘 








xz》 
Et 淹 








mr 
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志 在 解 决 这 一 问题 的 一 些 技术 在 过 去 几 年 里 已 逐渐 普及 开 来 。 本 章 将 


介绍 HTML5 之 async/defer 属性 的 作用 , 以 及 两 个 流行 的 脚本 加 载 








库 : yepnope 和 Require.js。 


Node-.js 的 异步 加 载 技术 
由 于 Node 异 步 模块 加 载 技术 的 用 处 微乎其微 ,本章 将 紧 紧 围绕 浏 
览 器 端的 异步 加 载 问题 。Node 一 度 提 供 过 异 步 版 本 的 require， 
但 到 0.3 版 本 就 删除 掉 了 。 如 果 有 兴趣 了 解 为 什么 ， 请 浏览 


~ 


https://groups.google.conm/d/msg modejsy -LZqlttb1AmmpYLILurqkJ。 


6.1 局 限 性 与 补充 说 明 


在 切入 主题 之 前 ， 敬 请 注意 以 下 重要 事宜 : 





口 本 章 中 的 技术 不 适用 于 内 联 脚本 , 即 那些 在 页 面 标记 中 直接 定义 的 
脚本 。 请 尽量 避免 使 用 内 联 技术 。 如 果 非 得 内 联 脚 本 ,请 勿 试图 对 
该 脚本 使 用 defer/async 属性 。 
口 使 用 本 章 任 何 技 术 时 请 勿 使 用 document .write。 异步 加 载 脚 本 中 
的 document .write 会 表现 出 不 可 预知 的 行为 。 最 好 大 家 根本 就 不 
知道 document .write 是 什么 。 在 此 ， 只 要 知道 document .write 
相当 于 操控 DOM 时 的 60T0 语句 就 行 了 。 

口 这 份 “指南 ”不 够 严 说。 为 简洁 起 见 ， 笔 者 忽略 了 一 些 特定 于 平 
台 的 重要 细节 。 例 如 ， 某 些 移动 浏览 器 会 拒绝 缓存 超过 一 定 尺寸 
的 大 脚本 。 因 此 ， 如 果 目 标 是 这 些 设备 的 话 ， 保 持 脚 本 的 小 巧 就 
很 重要 了 。 
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页 面 加 载 优化 技术 是 一 个 相关 专著 已 汗 牛 充 栋 的 丰富 主题 , 而 脚本 加 
载 技术 不 过 是 其 中 的 一 小 部 分 。 但 对 那些 不 曾 使 用 过 异步 加 载 技术 的 
富 脚 本 站 点 来 说 ， 使 用 本 章 的 一 些 技 术 能 唾 手 可 得 丰厚 的 回报 。 











6.2 ”<script> 标 签 的 再 认识 





虽然 有 些 伟 大 其 词 ， 但 笔者 仍然 想 说 <script> 一 直 以 来 都 是 最 重要 
的 HTML 标签 。 不 信 ? 请 想象 一 下 吧 ， 有 个 网 页 虽然 只 有 一 个 
<script> 标 签 却 能 做 任何 事情 ! <script> 标 签 能 够 空手 套 白 狼 ， 凭 
空 变 出 文档 ， 加 载 任 何 自 己 想 要 的 资源 。 相 比 之 下 ， 没 有 <script> 
标签 的 页 面 即 使 再 炫目 也 存在 明显 的 缺陷 ， 即 无 法 啊 应 用 户 的 动作 ， 
最 复杂 的 回应 也 不 过 是 肤浅 的 CSS 变换 。 

















现代 浏览 器 中 的 <script> 标 签 分 成 了 两 种 新 类 型 : 经 典型 和 非 阻 塞 
型 。 本 节 将 讨论 如 何 运 用 这 两 种 标签 来 尽快 加 载 页 面 。 





6.2.1 阻塞 型 脚本 何去何从 


标准 版 本 的 <script> 标 签 常 常 被 称 作 阻塞 型 标签 。 这 个 词 必须 放 在 
上 下 文中 进行 理解 : 现代 浏览 器 看 到 阻塞 型 <script> 标 签 时 ， 会 跳 
过 阻塞 点 继续 读 取 文 档 及 下 载 其 他 资源 〈 脚 本 和 样式 表 )。 但 直到 脚 
本 下 载 完 毕 并 运行 之 后 ， 浏 览 咒 才 会 评 佑 阻塞 点 之 后 的 那些 资源 。 




















因此 ， 如 果 网 页 文档 的 <head> 标 签 里 有 5 个 阻塞 型 <script> 标 签 ， 则 
在 所 有 这 5 个 脚本 均 下 载 完毕 并 运行 之 前 ， 用 户 除 了 页 面 标题 之 外 看 
不 到 任何 东西 。 不 仅 如 此 ， 即 便 这 些 脚 本 运行 了 ， 它 们 也 只 能 看 到 阻 
塞 点 之 前 的 那 部 分 文档 。 如 果 想 看 到 <body> 标 签 中 正 等 待 加 载 的 那些 








100 | 第 6 章 异步 的 脚本 加 载 


好 东西 ， 就 必须 给 像 document .onreadystatechange 这 样 的 事件 绑 
定 一 个 事件 处 理 器 。 


基于 上 述 原因 ， 现 在 越 来 越 流行 把 脚本 放 在 页 面 <body> 标 签 的 尾部 。 
这 样 , 一 方面 用 户 可 以 更 快 地 看 到 页 面 , 另 一 方面 脚本 也 可 以 主动 亲 
密 接触 DOM 而 无 需 等 竺 事件 来 触发 自己 。 对 大 多 数 脚本 而 言 ， 这 次 
“搬家 ”是 个 巨大 的 进步 。 


但 并 非 所 有 脚本 都 一 样 。 在 向 下 搬 动 脚本 之 前 , 请 先 问 自己 3 个 问题 。 


D 该 脚本 是 否 有 可 能 被 <body> 标 签 里 的 内 联 JavaScript 直接 调用 ? 

答案 可 能 一 目 了 然 ， 但 仍 值得 核查 一 这 。 

口 该 脚本 是 否 支 持 老式 浏览 器 识别 HTML5 元 素 ? Modernizr 支持 ， 
也 正 因为 这 个 原因 ， 最 佳 实践 项 目的 典范 HTML5 Boilerplate” 直接 
在 文档 顶部 包含 了 Modernizr。 

口 该 脚本 是 和 否 会 影响 已 浑 染 页 面 的 外 观 ?” Typekit 宿主 字体 就 是 一 个 

例子 。 如 果 把 Typekit 脚本 放 在 文档 末尾 ,那么 页 面 文本 就 会 泻 染 

两 次 ， 即 读 取 文档 时 即刻 泻 染 ， 脚 本 运行 时 再 次 泻 染 。 


























上 述 问 题 只 要 有 一 个 答案 是 肯定 的 ， 那 么 该 脚本 就 应 该 放 在 <head> 
标签 中 ， 否 则 就 应 该 放 在 <body> 标 签 中 。 抽 象 、 集 中 这 两 类 脚本 之 
吾 会 让 文档 形 如 ; 
<htmL> 
<head> 

<!--metadata and stylesheets go here --> 


<script src="headScripts.js"></scripts> 
</head> 








SY 


@ 参见 http://modernizr.com/。 
@ 参见 http://html5boilerplate.com/。 


DS 
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<body> 
<!-- content goes here --> 
<script src="bodyScripts.js"></script> 
</body> 
</html> 
这 确实 大 大 缩短 了 加 载 时 间 , 但 要 注意 一 点 , 这 可 能 让 用 户 有 机 会 在 


加 载 bodyScripts.js 之 前 与 页 面 交 互 。 


6.2.2 ”脚本 的 延迟 运行 


上 一 节 中 建议 将 大 多 数 脚本 放 在 <body> 中 ， 因 为 这 样 既 能 让 用 户 更 
快 地 看 到 网 页 ， 又 能 避免 操控 DOM 之 前 绑 定 “就 绪 ” 事 件 的 开销 。 但 
这 种 方式 也 有 一 个 缺点 ， 即 浏览 咒 在 加 载 完 整个 文档 之 前 无 法 加 载 这 
些 脚 本 ， 这 对 那些 通过 慢 速 连 接 传送 的 大 型 文档 来 说 会 是 一 大 瓶颈 。 





理想 情况 下 ， 脚 本 的 加 载 应 该 与 文档 的 加 载 同 时 进行 ， 并 且 不 影响 
DOM 的 浑 染 。 这 样 ， 一 旦 文档 就 绪 就 可 以 运行 脚本 ， 因 为 已 经 按照 
<script> 标 签 的 次 序 加 载 了 相应 脚本 。 


如 果 大 家 已 经 读 到 这 里 了 ， 那 么 一 定 会 迫不及待 地 想 写 一 个 自 定义 
Ajax 脚本 加 载 器 以 满足 这 样 的 需求 ! 不 过 , 大 多 数 浏览 器 都 支持 一 个 
更 为 简单 的 解决 方案 


<script defer src = "deferredScript.js"> 


添加 defer (延迟 ) 属性 相当 于 对 浏览 器 说 :“ 请 马上 开始 加 载 这 个 
脚本 吧 ， 但是， 请 等 到 文档 就 绪 且 所 有 此 前 具有 defer 属性 的 脚本 
都 结束 运行 之 后 再 运行 它 。” 在 文档 <head> 标 签 里 放 人 延迟 脚本 ， 既 
能 带 来 脚本 置 于 <body> 标 签 时 的 全 部 好 处 ， 又 能 让 大 文档 的 加 载 速 
度 大 幅 提升 ! 
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有 什么 不 足 ? 并 非 所 有 浏览 器 都 支持 defer。 在 笔者 写作 本 书 的 时 
候 ， 甚 至 最 新 版 的 Opera 都 忽略 了 这 个 属性 。" 这 意味 着 ， 如 果 想 确 
保 自己 的 延迟 脚本 能 在 文档 加 载 后 运行 , 就 必须 将 所 有 延迟 脚本 的 代 
码 都 封装 在 诸如 jQuery 之 $(document ) . ready 之 类 的 结构 中 。 这 是 
值得 的 , 因为 差不多 97% 的 访客 都 能 享受 到 并 行 加 载 的 好 处 , 同时 另 
外 3% 的 访客 仍然 能 使 用 功能 完整 的 JavaScript。 








使 用 defer 属性 把 bodyScript.js 换 成 deferredScript.js, 于 是 上 一 节 的 
页 面 例子 改进 如 下 : 





<htmL> 
<head> 
<!-- metadata and stylesheets go here --> 
<script src="headScripts.js"></scripts> 
<script defer src="deferredScripts.ijs"></script> 
</head> 
<body> 
<!-- content goes here --> 
</body> 
</html> 


请 记 住 deferredScripts 的 封装 很 重要 , 这 样 即使 浏览 器 不 支持 defer， 
deferredScripts 也 会 在 文档 就 绪 事件 之 后 才 运 行 。 如 果 页 面 主体 内 容 
远 远 超 过 几 千 字 节 ， 那 么 付出 这 点 代价 是 完全 值得 的 。 





6.2.3 ”脚本 的 完全 并 行 化 

如 果 你 是 斤斤计较 到 毫秒 级 页 面 加 载 时 间 的 完美 主义 者 , 那么 defer 
也 许 就 像 是 淡 而 无 味 的 薄 盐 桨 油 。 你 可 不 想 一 直 等 到 此 前 所 有 的 
defer 脚本 都 运行 结束 , 当然 也 肯定 不 想 等 到 文档 就 绪 之 后 才 运 行 这 











人 参见 http://caniuse.com/#search=defer。 
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些 脚 本 , 更 别提 为 了 照顾 Opera 还 使 用 什么 $(document ) . ready 了 。 
你 就 是 想 尽 快 加 载 并 且 尽 快运 行 这 些 脚本 。 





这 也 正 是 现代 浏览 器 提供 了 async( 异 步 ) 属性 的 原因 。 


<script async src 
<script async src 


如 果 说 defer 让 我 们 想到 一 种 更 静 等 待 文档 加 载 的 有 序 排队 场景 ， 

那么 async 就 会 让 我 们 想到 混乱 的 无 政府 状态 。 前 面 给 出 的 那 两 个 
却 本 会 以 任意 次 序 运行 ,而且 只 要 JavaScript 引擎 可 用 就 会 立即 运行 ， 
而 不 论文 档 就 绪 与 否 。 因 此 , 抛 开 对 速度 的 渴求 ,我 们 有 什么 理由 用 


async 呢 ? 


"speedyGonzales.js"> 
"roadRunner.js"> 





对 大 多 数 脚 本 来 说 ,async 是 一 块 难以 下 咽 的 鸡肋 .async 不 像 defer 
那样 得 到 广泛 的 支持 , 因此 很 少 有 用 户 会 注意 到 性 能 的 提升 。 同时， 
由 于 异步 脚本 会 在 任意 时 刻 运行 , 它 实 在 太 容易 引起 海 森 保 蚁 虫 之 灾 
了 【脚本 刚好 结束 加 载 时 就 会 蚁 虫 四 起 )。 











但 是 , 对 那些 一 心 一 意 搞 独立 的 脚本 来 说 , async 确实 是 一 次 不 大 但 
很 重要 的 胜利 。 获取 一 个 负责 添加 反馈 小 部 件 的 第 三 方 脚本 , 再 获取 
一 个 负责 添加 技术 支持 聊天 框 的 第 三 方 脚本 , 怎么 样 ? 页 面 没有 它们 
也 运行 得 很 好 ,而 且 也 不 在 乎 它们 谁 先 运行 谁 后 运行 。 因 此 ， 对 这 些 
第 三 方 脚本 使 用 async 属性 ， 相 当 于 一 分 钱 没 花 就 提升 了 它们 的 运 
行 速度 。 

















人 参见 http://caniuse.com/#search=async。 
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Async+Defer=? 
大 家 可 能 会 问 :“ 如 果 我 对 同一 个 脚本 既 用 defer 又 用 async， 会 
怎么 样 呢 ? ”答案 是 ， 在 那些 同时 支持 这 两 个 属性 的 浏览 器 中 ， 
async 会 履 盖 掉 defer。 由 于 defer 有 着 更 广泛 的 支持 ， 而 且 具 有 
async 的 主要 优势 (允许 在 下 载 脚本 的 同时 进行 DOM 的 泻 染 )， 
此 我 们 建议 尽量 使 用 defer 代 替 async。 


上 一 个 页 面 示例 再 添加 两 个 独立 的 第 三 方 小 部 件 ， 得 到 的 结果 如 下 : 


<htmL> 
<head> 
<!-- metadata and stylesheets go here --> 
<script src="headScripts.js"></scripts> 
<script src="deferredScripts.js" defer></script> 
</head> 
<body> 
<!-- content goes here --> 
<script async defer src="feedbackWidget.js"></script> 
<script async defer src="chatWidget.js"></script> 
</body> 
</htmL> 


这 个 页 面 结 构 清 晰 展示 了 脚本 的 优先 次 序 。 对 于 绝 大 多 数 浏览 器 , DOM 
的 泻 染 只 会 延迟 至 headScriptsjs 结束 运行 时 。 进 行 DOM 泻 染 的 同时 会 
在 后 台 加 载 deferredScriptsjs。 接 着 ,在 DOM 泻 染 结 束 时 将 运行 
deferredScripts.js 和 那 两 个 小 部 件 脚本 。 这 两 个 小 部 件 脚 本 在 那些 文 
持 async 的 浏览 器 中 会 做 无 序 运 行 。 如 果 不 确定 这 是 否 妥 当 ， 请 纪 使 
用 async! 














本 节 讨 论 了 <script> 标 签 的 位 置 和 属性 如 何 对 页 面 用 户 等 等 时 间 造 
成 了 巨大 的 差异 。 下 一 节 将 学 习 如 何 使 用 脚本 来 加 载 其 他 脚本 ， 以 进 
一 步 利 用 异步 加 载 原理 。 








6.3 ”可 编程 的 脚本 加 载 105 


6.3 ”可 编程 的 脚本 加 载 


虽然 <script> 标 签 简单 得 令 人 心动 ,但 有 些 情 况 确 实 需要 更 精致 的 
脚本 加 载 方式 。 我 们 可 能 只 想 给 那些 满足 一 定 条 件 的 用 户 加 载 某 个 脚 
本 , 譬如 白金 会 员 或 达到 一 定 级 别 的 玩家 , 也 可 能 只 想 当 用 户 单 击 激 
活 时 才 加 载 某 个 特性 ， 壁 如 聊天 小 部 件 。 








本 节 将 讨论 如 何 用 脚本 加 载 其 他 脚本 。 简 要 介绍 一 些 低级 方法 后 , 将 
讨论 两 个 会 让 脚本 加 载 易如反掌 的 流行 库 : yepnope 和 Require js。 
6.3.1 直接 加 载 脚本 

在 浏览 器 API 层 面 ， 有 两 种 合理 的 方法 来 抓 取 并 运行 服务 器 脚本 。 


口 生成 Ajax 请 求 并 用 eval 函数 处 理 响应 。 
口 向 DOM 插 和 人 <script> 标 签 。 








后 一 种 方法 更 好 ， 因 为 浏览 顺 会 蔡 我 们 操心 生成 HITP 请 求 这 样 的 
事 。 再 者 ，eval 也 有 一 些 实际 问题 : 泄漏 作用 域 , 调试 搞 得 一 团 糟 ， 
而 且 还 可 能 降低 性 能 。 因此, 要 想 加 载 名 为 featurejs 的 脚本 ,我 们 应 
该 用 类 似 下 面 这 样 的 代码 来 插入 <script> 标 签 。 

var head = document.getElementsByTagName('head' )[0]; 

var script = document.createElement('script'); 


script.src = '/js/feature.js'; 
head.appendChild(script); 


稍 等 , 我 们 如 何 才 能 知道 脚本 何 时 加 载 结 束 呢 ? 我 们 可 以 给 脚本 本 身 
添加 一 些 代码 以 触发 事件 , 但 如 果 要 为 每 个 待 加 载 脚 本 都 添加 这 样 的 
代码 , 那 也 太 闹 心 了 。 或 者 是 另外 一 种 情况 ， 即 我 们 不 可 能 给 第 三 方 
服务 右上 的 脚本 添加 这 样 的 代码 。HTMLS5 规范 定义 了 一 个 可 以 绑 定 
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回调 的 onLoad 属性 。 


script.onload = function() { 
// 现在 可 以 调用 脚本 里 定义 的 函数 了 
}; 
不 过 ，IE8 及 更 老 的 版 本 并 不 文 持 onload ， 它 们 文 持 的 是 
onreadystatechange。, 茶 些 浏览 右 在 插入 <script> 标 签 时 还 会 出 现 
一 些 “ 灵 异 事件 ”。 而 且 ， 这 里 其 至 还 没 谈 到 错误 处 理 呢 ! 为 了 避免 
所 有 这 些 令 人 头疼 的 问题 ， 笔 者 在 此 强烈 建议 使 用 脚本 加 载 库 。 








6.3.2 ”yepnope 的 条 件 加 载 

yepnope "是 一 个 简单 的 、 轻 量 级 的 脚本 加 载 库 ( 压缩 后 的 精简 版 只 
1.7KB )， 其 设计 目标 就 是 真诚 服务 于 最 常见 的 动态 脚本 加 载 需 求 。 
yepnope 可 以 独立 使 用 ,也 可 以 作为 Modernizr 特性 检测 库 的 一 部 分 。 











yepnope 最 简单 的 用 法 是 ， 加 载 脚本 并 对 脚本 完成 运行 这 一 事件 返回 
一 个 回 调 oO 
yepnope({ 

Load: 'oompaLoompas.js', 

callback: function() { 

console.log('0Oompa-Loompas ready!'); 

} 
}); 
还 是 无 动 于 衷 ? 下 面 我 们 要 用 yepnope 来 并 行 加 载 多 个 脚本 并 按 给 定 
次 序 运行 它们 。 举 个 例子 , 假设 我 们 想 加 载 Backbone.js, 而 这 个 脚本 
又 依赖 于 Underscore.js。 为 此 ， 我 们 只 需 用 数组 形式 提供 这 两 个 脚本 











人 参见 http://yepnopejs.com/。 
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的 位 置 作 为 加 载 参数 。 


yepnope({ 
Load: ['underscore.js', 'backbone.7Js']， 
complete: function() { 
// 这 里 是 Backbone 的 业务 逻辑 
} 
}); 


请 注意 ， 这 里 使 用 了 complete ( 完成 ) 而 不 是 caLLback ( 回调 )。 
其 差别 在 于 ， 脚 本 加 载 列表 中 的 每 个 资源 均 会 运行 caLLback， 而 只 
有 当 所 有 脚本 都 加 载 完成 后 才 会 运行 compLete。 








yepnope 的 标志 性 特征 是 条 件 加 载 。 给 定 test 参数 ，yepnope 会 根据 
该 参数 值 是 否 为 真 而 加 载 不 同 的 资源 。 举 个 例子 ， 假 设 已 经 使 用 了 
Modernizr 库 , 则 可 以 以 一 定 的 准确 度 判 断 用 户 是 否 在 用 触摸 屏 设备 ， 
从 而 据 此 相应 地 加 载 不 同 的 样式 表 及 脚本 。 





yepnope({ 
test: Modernizr.touch, 
yep: ['touchStyles.css', 'touchApplication.js'], 
nope: ['mouseStyles.css', 'mouseApplication.js'], 
complete: function() { 
// 不 管 是 哪 一 种 情况 ， 应 用 程序 均 已 就 绪 ! 
} 
}); 


我 们 只 用 寥寥 几 行 代码 就 措 好 了 舞台 , 可 以 基于 用 户 的 接 入 设备 而 给 
他 们 完全 不 同 的 使 用 体验 。 当 然 ， 不 是 所 有 的 条 件 加 载 都 需要 备 齐 
yep (是 ) 和 nope《〈 和 否 ) 这 两 种 测试 结果 。yepnope 最 常见 的 用 法 之 
一 就 是 加 载 垫 片 脚本 以 弥补 老式 浏览 器 缺失 的 功能 。 





yepnope({ 
test: window.json, 
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nope: ['json2.7s'], 
complete: function() { 
// 现在 可 以 放心 地 用 JSON 了 
} 
}); 


页 面 使 用 了 yepnope 之 后 应 该 变 成 下 面 这 种 漂亮 的 标记 结构 : 


<html> 
<head> 
<!-- metadata and stylesheets go here --> 
<script src="headScripts.js"></scripts> 
<script src="deferredScripts.js" defer></script> 
</head> 
<body> 
<!-- content goes here --> 
</body> 
</htmL> 


很 眼熟 ? 这 个 结构 和 讨论 defer 属性 那 一 节 给 出 的 结构 一 样 ， 唯 一 
的 区 别 是 这 里 的 某 个 脚本 文件 已 经 拼接 了 yepnope.js (很 可 能 就 在 
deferredScripts.js 的 顶部 )， 这 样 就 可 以 独立 地 加 载 那 些 根 据 条 件 再 加 
载 的 脚本 ( 因为 浏览 器 需要 垫 片 脚本 ) 和 那些 想 要 动态 加 载 的 脚本 ( 以 
便 回应 用 户 的 动作 )。 结 果 将 是 一 个 更 小 巧 的 deferredScripts.js。 








笔者 很 喜欢 yepnope。 对 那些 比较 简单 的 应 用 来 说 ， 壁 如 只 想 抓 取 某 
些 热 片 脚本 的 应 用 , 或 者 只 想 在 用 户 点 击 什么 东西 时 再 加 载 某 个 特性 
的 应 用 ，yepnope 真是 做 得 大 完美 了 。 不 过 ， 那 些 非常 庞杂 的 应 用 仍 
然 需要 更 强大 的 技术 。 





6.3.3 Require.js/AMD 的 智能 加 载 
开发 人 员 想 通过 脚本 加 载 器 让 混乱 不 堪 的 富 脚 本 应 用 变 得 更 规整 有 
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序 一 些 ， 而 Require.js 就 是 这 样 一 种 选择 。Require.js 这 个 强大 的 工具 
包 能 够 自动 和 AMD 技术 一 起 返 顺 哪怕 最 复杂 的 脚本 依赖 图 。 


我 们 稍 后 再 讨论 AMD , 现在 先 来 看 一 个 用 到 Require.js 同名 函数 的 简 
单 脚本 加 载 示例 。 





require(['moment'], function(moment) { 
console.1l0g(moment().format('dqddd')); // 星期 几 

}); 

require 浮 数 接受 一 个 由 模块 名 称 构成 的 数组 , 然后 并 行 地 加 载 所 有 

这 些 脚 本 模块 。 与 yepnope 不 同 , Require.js 不 会 保证 按 顺 序 运 行 目标 

脚本 ,只 是 保证 它们 的 运行 次 序 能 满足 各 自 的 依赖 性 要 求 , 但 前 提 是 

这 些 脚 本 的 定义 遵守 了 AMD ( Asynchronous Module Definition， 异步 

模块 定义 ) 规范 。 








AMD 规范 "的 宗旨 是 蔡 浏览 器 做 CommonJS 标准 已 经 蔡 服务 器 做 过 
的 那些 事 。( Node.js 模块 即 基 于 CommonJS 标准 。) AMD 推行 一 个 由 
Require.js 负责 提供 的 名 叫 define 的 全 局 函数 ， 该 函数 有 3 个 参数 : 

一 个 模块 名 称 , 一 个 模块 依赖 性 列表 ,以 及 一 个 在 那些 依赖 性 模块 加 
载 结束 时 触发 的 回调 ,例如 ,下 面 的 define 语句 可 以 作为 依赖 jQuery 
之 应 用 模块 的 有 效 AMD 定义 。 











define('myApplication' ['jquery'], function($) { 
$('<body>').append('<p>Hello, async world!</p>'); 

让 

注意 这 里 传递 给 回调 的 是 jQuery 对 象 $。 实 际 上 ，define 接受 的 
这 个 回调 参数 一 直 对 应 着 依赖 性 列表 中 的 各 个 模块 依赖 项 。 大 家 也 


- 








人 参见 https://github.com/amdjs/amdjs-api/wiki/AMD。 
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许 奇 怪 : define 怎样 知道 捕获 jQuery 对 象 呢 ?” 管 案 是 jQuery 自己 
的 AMD 定义 ?通过 其 define 回调 返回 了 jQuery 对 象 ， 借 此 声明 
“这 是 我 的 导出 对 象 ”。 





define( "jquery", [], function () { return jQuery; } ); 


AMD 的 奥妙 不 止 于 此 ， 但 这 是 精华 所 在 。 如 果 应 用 的 每 个 脚本 都 添 
加 了 AMD 定义 , 则 意味 着 我 们 只 要 调用 require 就 能 保证 其 回调 不 
被 调用 , 除非 既 满 足 了 应 用 对 脚本 的 直接 依赖 性 ,又 满足 了 脚本 的 依 
赖 性 和 脚本 所 依赖 的 那些 脚本 的 依赖 性 , 并 且 所 有 脚本 均 按 最 大 的 并 
行 性 进行 加 载 ， 而 运行 次 序 也 和 依赖 图 一 致 。 














听 起 来 很 棒 ， 是 吧 ? 但 也 有 一 点 美中不足 : 虽然 AMD 已 经 在 
JavaScript 社 区 产生 了 一 些 影响 ,但 仍然 有 大 量 的 观望 者 . 臂 如 ,Jeremy 
Ashkenas 就 拒绝 为 其 广 受 欢迎 的 Underscore.js/Backbone.js 库 添 加 必 
要 的 AMD 规范 ， 他 还 在 等 待 着 一 个 ECMAScript 模块 标准 。 因 此 ， 
我 们 不 能 指望 第 三 方 模块 都 带 有 自己 的 AMD 定义 。 选 择 AMD 会 让 
应 用 更 具 一 致 性 ， 但 这 也 会 滋生 呆板 木讷 的 代码 。 

















本 节 介 绍 了 如 何 通过 操控 DOM 来 实现 运行 时 加 载 脚本 ， 还 讨论 了 两 
个 旨 在 简化 脚本 加 载 过程 的 库 : yepone 是 一 个 小 巧 而 精干 的 工具 ， 

Requirejs 则 是 一 个 巨 硕 而 强大 的 工具 。 最 终 选 择 哪个 库 完全 取决 于 
正在 开发 的 应 用 类 型 和 开发 团队 的 类 型 。“ 企 业 级 ”应 用 和 较 大 型 的 
前 端 开发 团队 更 可 能 受益 于 Require.js 大 力 推 行 的 AMD 模块 化 技术 。 











@ 参见 https://github.com/jquery/jquery/blob/master/src/exports.js#L17。 
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要 想 让 自己 的 站 点 更 快捷 ,可 以 异步 加 载 那 些 暂 时 用 不 到 的 脚本 。 为 
此 最 简单 的 做 法 是 审慎 地 使 用 defer 属性 和 async 属性 。 如 果 要 求 
根据 条 件 来 加 载 脚本 ， 请 考虑 像 yepnope 这 样 的 脚本 加 载 器 。 如 果 站 
点 存在 大 量 相互 依赖 的 脚本 ， 请 考虑 Require.js。 选 择 最 适合 任务 的 
工具 ， 然 后 使 用 它 ， 享 受 它 带 来 的 便捷 。 














本 书 内 容 到 此 就 要 结束 了 , 感谢 大 家 花 时 间 阅 读 。 能 执笔 写 这 本 书 是 
笔者 的 荣幸 。 无 论 大 家 的 JavaScript 之 旅 从 这 里 走向 何方 ， 笔 者 都 真 
诚 地 乔 望 那里 会 盛开 着 美丽 的 、 事 件 驱 动 式 的 代码 之 花 。 


附录 


JavaScript 编辑 工具 











本 附录 简要 介绍 了 一 些 最 流行 的 、 套 用 同步 编码 风格 来 编写 异步 
JavaScript 代码 的 工具 。 这 些 工 具 都 不 能 替代 我 们 自己 对 JavaScript 
事件 的 正确 理解 ， 但 能 为 我 们 的 异步 智库 添加 点 小 插曲 。 





A.1 TameJS 


TameJS 是 OkCupid 团队 开发 的 预 编 译 带 项 目 ( http://tamejs.org/ )， 它 
在 GitHub 上 获得 了 600 多 人 的 关注 。 它 向 JavaScript 添加 了 两 个 关键 
字 : await 和 defer。await 语句 块 定义 的 代码 只 有 等 到 defer 定 
义 的 各 项 异步 任务 均 完 成 后 才能 返回 。 





await { 
setTimeout(defer(), 100); 
} 
console.log("this will run after the 100ms timeout"); 


TameJS 的 项 目 人 员 还 使 用 这 种 await/defer 机 制 基于 CoffeeScript 
派生 出 了 IceCoffeeScript 项 目 (http://maxtaco.github.com/coffee-script/ )。 
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A.2 StratifiedJS 


StratifiedJS ( http://onilabs.com/stratifiedjs ) 是 await/defer 范 型 的 蔡 
代 品 , 它 提 供 了 粒度 更 细 的 一 些 控 制 结构 ， 其 名 称 也 更 直观 一 些 ， 如 


waitfor、resume 等 。 











console.log('this code will run right away...'); 
waitfor() { 
setTimeout(resume, 500); 


} 
console.log('...and this will run 500ms later.'); 


尽管 StratifiedJS 未 能 广泛 应 用 , 但 这 个 “野心 勃勃 "的 项 目 还 是 受到 了 
John Resig (jQuery 之 父 ) 等 人 的 赞誉 。" 请 注意 ，StratifiedJS 是 规范 
的 名 称 而 不 是 实现 的 名 称 ， 官 方 的 参考 实现 名 称 叫做 Oni Apollo”。 


A.3 Kaffeine 





Kaffeine 这 个 预 编译 器 标榜 自己 是 “扩展 版 的 JavaScript*。 “除了 其 他 
特性 之 外 ，Kaffeine 语言 针对 非 谍 套 回 调 提供 了 一 颗 简单 的 语法 糖 ; 
只 要 在 异步 汕 数 名 之 后 添加 一 个 !。Kaffeine 认为 该 也 数 的 末 参 数 是 一 
个 回调 ， 并 简单 地 把 位 于 函数 调用 之 后 的 所 有 代码 转换 成 这 个 回调 。 








例如 ，jQuery 应 用 经 常 希望 在 文档 就 绪 之 后 在 $ 回 调 内 部 运行 各 种 东 
西 。 用 Kaffeine 来 写 就 很 简单 了 。 








W https://twitter.conyjeresig/statuses/164496725254479872。 
见 https://github.com/onilabs/apollo。 
见 http://weepy.github.comy/kaffeine/index.html。 





的 提 日 
NN 
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$!() 

alert('The document Is ready.'); 

虽然 Kaffeine 不 像 CoffeeScript 那样 拥有 一 大 批 支持 者 ， 但 类 似 这 样 
的 特性 也 值得 我 们 关注 它 。 基 于 CoffeeScript 派生 出 来 的 CoCo 和 
LiveScript 这 两 个 项 目 也 有 相似 的 特性 ， 称 作 “ 后 置 调用 ”。 用 
CoCo/LiveScript 改 写 上 述 示例 后 形 如 : 








FT 


<- $ 
alert 'The document Is ready' 


Kaffeine、CoCo、LiveScript 等 项 目 提供 的 功能 和 TameJS/StratifiedJS 
差不多 ,但 前 者 更 易学 习 。 


A.4 Streamline.js 





Streamline.js" 类 似 于 Kaffeine， 也 提供 了 一 种 特殊 语法 ， 负 责 将 异步 
国 数 调用 之 后 的 代码 转换 成 它 的 回调 。 只 要 在 回调 参数 的 位 置 写 上 _ 
即 可 。 
for (var s = 1; s < 60; s++) { 

setTimeout( , 1000); 


console.log(s + ' seconds have elapsed'); 


} 

console.log('1 minute has elapsed'); 

有 趣 之 处 在 于 ，Streamline 既 可 以 生成 标准 的 回调 驱动 式 JavaScript， 
又 可 以 生成 用 于 node-fibers 的 基于 纤 程 的 代码 (参见 A.5 )。 此 外 ， 

Streamline 与 大 多 数 其 他 的 JavaScript 预 编译 器 不 同 ， 它 可 以 与 
CoffeeScript 联合 使 用 。 














@ 参见 https://github.com/Sage/streamlinejs。 

















116 | 附录 JavaScript 编辑 工具 














注意 ，Streamline 希望 回调 能 遵守 Node 风格 的 参数 列表 约定 (err， 
resuLts.,,)， 这 虽然 简化 了 Node 环境 下 的 错误 处 理 ， 却 很 难 用 在 
浏览 器 开发 环境 中 。 


A.5 Node-Fibers 





附录 里 罗列 的 其 他 项 目 都 只 是 编译 成 平平 稼 第 的 JavaScript ， 但 
node-fibers 事实 上 已 经 通过 Node 运行 时 扩展 了 对 JavaScript 的 理解 ， 
它 添加 了 一 种 类 似 于 线程 的 构造 纤 程 ( fiber ，http://en. 
wikipedia.org/ wiki/ Fiber (computer_ science) )。 纤 程 可 以 让 步 于 其 他 
纤 程 ， 可 以 暂停 自己 的 执行 逻辑 ， 等 到 某 个 事件 导致 自己 再 运行 。 

















I 











var fiber = Fiber.current; 
console.log('Yielding until the timeout elapses...') 
setTimeout(function() { 
fiber.run(); 
}, 1000); 
Fiber.yield(); 
console.log('...1 second later'); 


相对 于 那些 JavaScript 预 编 译 器 ，node-fibers 的 主要 优势 在 于 调试 。 
node-fibers 模块 在 堆栈 轨迹 中 的 行 号 对 应 于 源 代码 中 的 行 号 ， 所 抛 出 
的 异常 即使 当 纤 程 处 于 try/catch 语句 块 内 部 时 也 可 以 被 捕获 。 





A.6 ”JavaScript 的 未 来 : 生成 器 


最 新 版 的 ECMAScript ( 所 有 主流 JavaScript 运行 时 环境 均 需 实现 的 
规范 ) 定义 了 一 种 新 的 JavaScript 特征 一 一 生成 器 ( generator )。 生 成 
妖 是 一 种 特殊 的 、 含 有 yield 语句 的 函数 类 型 yietLd 类 似 于 return， 
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只 不 过 生成 器 下 次 再 运行 时 会 从 这 条 yield 语句 重新 开始 。 





从 概念 上 看 ， 生 成 器 有 点 复杂 。 不 过 Mozilla 的 Task.js ( http://taskjs. 
org/ ) 库 展 示 出 这 种 生成 句 如 何 让 异步 代码 更 简单 。 由 于 生成 器 可 以 
重新 开始 ， 我 们 能 写 出 类 似 这 样 的 代码 : 





task.spawn(function() { 

console.log("Yielding..."); 

yield task.sleep(1000); 

console.log("...resuming 1 second later"); 
}); 
下 面 简 述 这 段 代码 的 工作 方式 。task. spawn 负责 运行 生成 器 函数 。 
如 果 没 有 yieLd， 生 成 器 函数 不 过 是 个 普通 的 困 数 。task.stLeep 负 
责 返回 一 个 1000 毫秒 后 即 执行 的 Promise 对 象 (请 参见 第 3 章 )。 
task. spawn 接受 这 个 Promise 对 象 ,并 附加 生成 器 作为 Promise 对 象 
执行 时 的 回调 。Promise 对 象 执行 之 后 ， 会 再 次 调用 生成 库 ， 这 时 会 
从 yield 语句 后 继续 执行 。 听 起 来 有 点 复杂 ， 不 过 活 儿 干 得 确实 很 


i 
迷 元 o 








ECMAScript6 ( 项目 代 号 Harmony ) 迄今 仍 未 有 定论 。 目前， 生成 器 
唯一 的 重要 实现 出 现 于 Firefox 浏览 器 ,而且 只 有 当 <script> 标 签 中 
定义 JavaScript 版 本 至 少 为 1.7 时 才能 启用 这 一 特性 ， 形 如 : 





<script type = "application/javascript; version=1.7"> 

如 果 生 成 器 深 深 打动 了 你 ， 有 个 工具 允许 把 使 用 生成 器 (包括 其 他 
ECMAScript 5+ 特 性 ) 的 代码 编译 成 广泛 支持 的 JavaScript 代码 ， 即 
Google 的 Traceur 项 目 "。 














@ 参见 http://code.google.com/p/traceur-compiler/。 
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